From 7e894c4073c5fcf089dfb042a5434ae858b5391f Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Fri, 29 Dec 2023 18:04:58 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=93=E6=89=91=E7=BC=96=E8=BE=91?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E7=BB=98=E5=88=B6=E7=AE=80=E5=8D=95=E5=85=B3?= =?UTF-8?q?=E7=B3=BB=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/GraphEditModal.vue | 5 +- .../monitor/topology-build/hooks/useGraph.ts | 66 +- .../monitor/topology-build/hooks/useNode.ts | 8 +- src/views/monitor/topology-build/index.vue | 4374 ++++++++--------- 4 files changed, 2102 insertions(+), 2351 deletions(-) diff --git a/src/views/monitor/topology-build/components/GraphEditModal.vue b/src/views/monitor/topology-build/components/GraphEditModal.vue index 95b24ab7..d9566715 100644 --- a/src/views/monitor/topology-build/components/GraphEditModal.vue +++ b/src/views/monitor/topology-build/components/GraphEditModal.vue @@ -584,6 +584,8 @@ function fnModalCancel() { help="边长, 三角形的中心位置是节点的位置" > diff --git a/src/views/monitor/topology-build/hooks/useGraph.ts b/src/views/monitor/topology-build/hooks/useGraph.ts index c6342372..d8d897b7 100644 --- a/src/views/monitor/topology-build/hooks/useGraph.ts +++ b/src/views/monitor/topology-build/hooks/useGraph.ts @@ -52,13 +52,14 @@ export default function useGraph() { itemTypes: ['canvas'], getContent(evt) { return ` -
+

画布

1. 显示所有隐藏项
@@ -125,6 +126,7 @@ export default function useGraph() { background: #e6f7ff; " > +

分组

1. 编辑
@@ -171,6 +173,7 @@ export default function useGraph() { background: #e6f7ff; " > +

节点

1. 编辑
@@ -204,15 +207,26 @@ export default function useGraph() { const graphNodeTooltip = new Tooltip({ offsetX: 10, offsetY: 20, - getContent(e: any) { - const outDiv = document.createElement('div'); - outDiv.style.width = '180px'; - outDiv.innerHTML = ` -

自定义tooltip

- `; - return outDiv; + getContent(evt) { + console.log(evt); + if (!evt) return '无'; + const item = evt.item?.getModel(); + if (!item?.label) { + return '无标签'; + } + console.log(item); + return ` +
+

节点： ${item?.label}

+
+ `; }, itemTypes: ['node'], }); @@ -233,6 +247,7 @@ export default function useGraph() { background: #e6f7ff; " > +

边

1. 编辑
@@ -266,15 +281,26 @@ export default function useGraph() { const graphEdgeTooltip = new Tooltip({ offsetX: 10, offsetY: 20, - getContent(e: any) { - const outDiv = document.createElement('div'); - outDiv.style.width = '180px'; - outDiv.innerHTML = ` -

graphEdgeTooltip

- `; - return outDiv; + getContent(evt) { + console.log(evt); + if (!evt) return '无'; + const item = evt.item?.getModel(); + if (!item?.label) { + return '无标签'; + } + console.log(item); + return ` +
+

边： ${item?.label}

+
+ `; }, itemTypes: ['edge'], }); @@ -425,7 +451,7 @@ export default function useGraph() { type: 'rect', size: [80, 40], style: { - radius: 8, + radius: 4, // fill: '#ffffff', stroke: '#ffffff', lineWidth: 1, diff --git a/src/views/monitor/topology-build/hooks/useNode.ts b/src/views/monitor/topology-build/hooks/useNode.ts index 3ccdcdf2..29502ad6 100644 --- a/src/views/monitor/topology-build/hooks/useNode.ts +++ b/src/views/monitor/topology-build/hooks/useNode.ts @@ -105,8 +105,8 @@ export default function useNode() { comboId: '', x: 0, y: 0, - type: 'circle', - size: 30, + type: 'rect', + size: [80, 40], anchorPoints: false, style: { fill: '#ffffff', @@ -165,7 +165,7 @@ export default function useNode() { if (['circle', 'ellipse', 'diamond', 'star', 'donut'].includes(type)) { let size: number[] | number = [40, 30]; if (['circle', 'star', 'donut'].includes(type)) { - size = 30; + size = 60; } const origin = nodeState.origin; if (origin.icon) { @@ -244,7 +244,7 @@ export default function useNode() { // 设置矩形大小 if (type === 'rect') { nodeState.form = Object.assign(nodeState.form, { - size: [40, 30], + size: [80, 40], }); } } diff --git a/src/views/monitor/topology-build/index.vue b/src/views/monitor/topology-build/index.vue index 38417af0..3a02c739 100644 --- a/src/views/monitor/topology-build/index.vue +++ b/src/views/monitor/topology-build/index.vue @@ -15,7 +15,7 @@ const { handleRanderGraph, handleChangeMode } = useGraph(); const graphG6Dom = ref(undefined); /**图数据 */ -const graphG6Data = reactive>({ +const graphG6Data2 = reactive>({ nodes: [ // 0 基站 { @@ -313,2356 +313,2078 @@ const graphG6Data = reactive>({ ], }); -const graphG6Data2 = reactive>({ - nodes: [ - { - id: '0', - x: 415, - y: 482, - size: 48, - type: 'circle', - label: '基站', - labelCfg: { - position: 'bottom', - offset: 10, - style: { - fill: '#000000', - fontSize: 12, - fontWeight: 500, - }, - }, - style: { - active: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - }, - selected: { - fill: 'rgb(255, 255, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 4, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - fill: 'rgb(223, 234, 255)', - stroke: '#4572d9', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(191, 213, 255)', - lineWidth: 1, - }, - disable: { - fill: 'rgb(250, 250, 250)', - stroke: 'rgb(224, 224, 224)', - lineWidth: 1, - }, - radius: 8, - stroke: '#5B8FF9', - lineWidth: 2, - cursor: 'pointer', - fill: '#9EC9FF', - }, - icon: { - show: true, - img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - width: 24, - height: 24, - offset: 20, - }, - direction: 'up', - }, - { - id: '1', - x: 132, - y: 42, - label: 'DN', - labelCfg: { - position: 'center', - offset: 0, - style: { - fill: '#000000', - fontSize: 12, - fontWeight: 500, - }, - }, - style: { - active: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - }, - selected: { - fill: 'rgb(255, 255, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 4, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - fill: 'rgb(223, 234, 255)', - stroke: '#4572d9', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(191, 213, 255)', - lineWidth: 1, - }, - disable: { - fill: 'rgb(250, 250, 250)', - stroke: 'rgb(224, 224, 224)', - lineWidth: 1, - }, - radius: 8, - stroke: '#00b050', - lineWidth: 1, - cursor: 'pointer', - fill: '#00b050', - }, - type: 'rect', - size: [80, 40], - icon: { - show: false, - img: '/svg/service.svg', - width: 25, - height: 25, - offset: 20, - }, - direction: 'up', - }, - { - id: '2', - x: 747, - y: 431, - label: 'O&M', - type: 'rect', - size: [80, 40], - style: { - active: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - }, - selected: { - fill: 'rgb(255, 255, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 4, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - fill: 'rgb(223, 234, 255)', - stroke: '#4572d9', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(191, 213, 255)', - lineWidth: 1, - }, - disable: { - fill: 'rgb(250, 250, 250)', - stroke: 'rgb(224, 224, 224)', - lineWidth: 1, - }, - radius: 8, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - labelCfg: { - position: 'center', - offset: 0, - style: { - fill: '#000000', - fontSize: 12, - fontWeight: 500, - }, - }, - icon: { - show: false, - img: '/svg/service.svg', - width: 25, - height: 25, - offset: 20, - }, - direction: 'up', - }, - { - id: '100', - label: 'EMS', - comboId: 'combo-ems', - x: 106, - y: 450, - type: 'rect', - size: [80, 40], - style: { - radius: 8, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - depth: 50, - labelCfg: { - position: 'center', - offset: 0, - style: { - fill: '#000000', - fontSize: 12, - fontWeight: 500, - }, - }, - icon: { - show: false, - img: '/svg/service.svg', - width: 25, - height: 25, - offset: 20, - }, - direction: 'up', - }, - { - id: '190', - comboId: 'combo-upf', - x: 119, - y: 338, - label: 'UPF', - labelCfg: { - position: 'center', - offset: 0, - style: { - fill: '#000000', - fontSize: 12, - fontWeight: 500, - }, - }, - style: { - active: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - }, - selected: { - fill: 'rgb(255, 255, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 4, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - fill: 'rgb(223, 234, 255)', - stroke: '#4572d9', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(191, 213, 255)', - lineWidth: 1, - }, - disable: { - fill: 'rgb(250, 250, 250)', - stroke: 'rgb(224, 224, 224)', - lineWidth: 1, - }, - radius: 8, - stroke: '#d580ff', - lineWidth: 1, - cursor: 'pointer', - fill: '#d580ff', - }, - type: 'rect', - size: [80, 40], - depth: 28, - icon: { - show: false, - img: '/svg/service.svg', - width: 25, - height: 25, - offset: 20, - }, - direction: 'up', - }, - { - id: '110', - comboId: 'combo-ims', - x: 600, - y: 350, - label: 'IMS', - labelCfg: { - position: 'center', - offset: 0, - style: { - fill: '#000000', - fontSize: 12, - fontWeight: 500, - }, - }, - style: { - active: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - }, - selected: { - fill: 'rgb(255, 255, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 4, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - fill: 'rgb(223, 234, 255)', - stroke: '#4572d9', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(191, 213, 255)', - lineWidth: 1, - }, - disable: { - fill: 'rgb(250, 250, 250)', - stroke: 'rgb(224, 224, 224)', - lineWidth: 1, - }, - radius: 8, - stroke: '#ed7d31', - lineWidth: 1, - cursor: 'pointer', - fill: '#ed7d31', - }, - type: 'rect', - size: [80, 40], - depth: 39, - icon: { - show: false, - img: '/svg/service.svg', - width: 25, - height: 25, - offset: 20, - }, - direction: 'up', - }, - { - id: '170', - label: 'NSSF', - comboId: 'combo-5gc', - x: 300, - y: 50, - type: 'rect', - size: [80, 40], - style: { - active: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - }, - selected: { - fill: 'rgb(255, 255, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 4, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - fill: 'rgb(223, 234, 255)', - stroke: '#4572d9', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(191, 213, 255)', - lineWidth: 1, - }, - disable: { - fill: 'rgb(250, 250, 250)', - stroke: 'rgb(224, 224, 224)', - lineWidth: 1, - }, - radius: 8, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - depth: 17, - labelCfg: { - position: 'center', - offset: 0, - style: { - fill: '#000000', - fontSize: 12, - fontWeight: 500, - }, - }, - icon: { - show: false, - img: '/svg/service.svg', - width: 25, - height: 25, - offset: 20, - }, - direction: 'up', - }, - { - id: '130', - label: 'AUSF', - comboId: 'combo-5gc', - x: 450, - y: 50, - type: 'rect', - size: [80, 40], - style: { - active: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - }, - selected: { - fill: 'rgb(255, 255, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 4, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - fill: 'rgb(223, 234, 255)', - stroke: '#4572d9', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(191, 213, 255)', - lineWidth: 1, - }, - disable: { - fill: 'rgb(250, 250, 250)', - stroke: 'rgb(224, 224, 224)', - lineWidth: 1, - }, - radius: 8, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - depth: 16, - labelCfg: { - position: 'center', - offset: 0, - style: { - fill: '#000000', - fontSize: 12, - fontWeight: 500, - }, - }, - icon: { - show: false, - img: '/svg/service.svg', - width: 25, - height: 25, - offset: 20, - }, - direction: 'up', - }, - { - id: '140', - label: 'UDM', - comboId: 'combo-5gc', - x: 600, - y: 50, - type: 'rect', - size: [80, 40], - style: { - active: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - }, - selected: { - fill: 'rgb(255, 255, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 4, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - fill: 'rgb(223, 234, 255)', - stroke: '#4572d9', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(191, 213, 255)', - lineWidth: 1, - }, - disable: { - fill: 'rgb(250, 250, 250)', - stroke: 'rgb(224, 224, 224)', - lineWidth: 1, - }, - radius: 8, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - depth: 15, - labelCfg: { - position: 'center', - offset: 0, - style: { - fill: '#000000', - fontSize: 12, - fontWeight: 500, - }, - }, - icon: { - show: false, - img: '/svg/service.svg', - width: 25, - height: 25, - offset: 20, - }, - direction: 'up', - }, - { - id: '120', - label: 'AMF', - comboId: 'combo-5gc', - x: 300, - y: 150, - type: 'rect', - size: [80, 40], - style: { - active: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - }, - selected: { - fill: 'rgb(255, 255, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 4, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - fill: 'rgb(223, 234, 255)', - stroke: '#4572d9', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(191, 213, 255)', - lineWidth: 1, - }, - disable: { - fill: 'rgb(250, 250, 250)', - stroke: 'rgb(224, 224, 224)', - lineWidth: 1, - }, - radius: 8, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - depth: 14, - labelCfg: { - position: 'center', - offset: 0, - style: { - fill: '#000000', - fontSize: 12, - fontWeight: 500, - }, - }, - icon: { - show: false, - img: '/svg/service.svg', - width: 25, - height: 25, - offset: 20, - }, - direction: 'up', - }, - { - id: '180', - label: 'NRF', - comboId: 'combo-5gc', - x: 450, - y: 150, - type: 'rect', - size: [80, 40], - style: { - active: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - }, - selected: { - fill: 'rgb(255, 255, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 4, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - fill: 'rgb(223, 234, 255)', - stroke: '#4572d9', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(191, 213, 255)', - lineWidth: 1, - }, - disable: { - fill: 'rgb(250, 250, 250)', - stroke: 'rgb(224, 224, 224)', - lineWidth: 1, - }, - radius: 8, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - depth: 13, - labelCfg: { - position: 'center', - offset: 0, - style: { - fill: '#000000', - fontSize: 12, - fontWeight: 500, - }, - }, - icon: { - show: false, - img: '/svg/service.svg', - width: 25, - height: 25, - offset: 20, - }, - direction: 'up', - }, - { - id: '150', - label: 'SMF', - comboId: 'combo-5gc', - x: 300, - y: 250, - type: 'rect', - size: [80, 40], - style: { - active: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - }, - selected: { - fill: 'rgb(255, 255, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 4, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - fill: 'rgb(223, 234, 255)', - stroke: '#4572d9', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(191, 213, 255)', - lineWidth: 1, - }, - disable: { - fill: 'rgb(250, 250, 250)', - stroke: 'rgb(224, 224, 224)', - lineWidth: 1, - }, - radius: 8, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - depth: 12, - labelCfg: { - position: 'center', - offset: 0, - style: { - fill: '#000000', - fontSize: 12, - fontWeight: 500, - }, - }, - icon: { - show: false, - img: '/svg/service.svg', - width: 25, - height: 25, - offset: 20, - }, - direction: 'up', - }, - { - id: '160', - label: 'PCF', - comboId: 'combo-5gc', - x: 700, - y: 250, - type: 'rect', - size: [80, 40], - style: { - active: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - }, - selected: { - fill: 'rgb(255, 255, 255)', - stroke: 'rgb(95, 149, 255)', - lineWidth: 4, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - fill: 'rgb(223, 234, 255)', - stroke: '#4572d9', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - fill: 'rgb(247, 250, 255)', - stroke: 'rgb(191, 213, 255)', - lineWidth: 1, - }, - disable: { - fill: 'rgb(250, 250, 250)', - stroke: 'rgb(224, 224, 224)', - lineWidth: 1, - }, - radius: 8, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - depth: 11, - labelCfg: { - position: 'center', - offset: 0, - style: { - fill: '#000000', - fontSize: 12, - fontWeight: 500, - }, - }, - icon: { - show: false, - img: '/svg/service.svg', - width: 25, - height: 25, - offset: 20, - }, - direction: 'up', - }, - ], - edges: [ - { - id: '170-120', - source: '170', - target: '120', - type: 'polyline', - style: { - offset: 20, - radius: 2, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - startPoint: { - x: 259.5, - y: 50, - anchorIndex: 0, - id: '259.5|||50', - }, - endPoint: { - x: 259.5, - y: 150, - anchorIndex: 0, - id: '259.5|||150', - }, - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 12, - fontWeight: 500, - }, - }, - }, - { - id: '140-120', - source: '140', - target: '120', - type: 'polyline', - style: { - offset: 20, - radius: 2, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - startPoint: { - x: 559.5, - y: 50, - anchorIndex: 0, - id: '559.5|||50', - }, - endPoint: { - x: 340.5, - y: 150, - anchorIndex: 1, - id: '340.5|||150', - }, - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 12, - fontWeight: 500, - }, - }, - }, - { - id: '120-180', - source: '120', - target: '180', - type: 'polyline', - style: { - offset: 20, - radius: 2, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - startPoint: { - x: 340.5, - y: 150, - anchorIndex: 1, - id: '340.5|||150', - }, - endPoint: { - x: 409.5, - y: 150, - anchorIndex: 0, - id: '409.5|||150', - }, - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 12, - fontWeight: 500, - }, - }, - }, - { - id: '140-110', - source: '140', - target: '110', - type: 'polyline', - style: { - offset: 20, - radius: 2, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - startPoint: { - x: 559.5, - y: 50, - anchorIndex: 0, - id: '559.5|||50', - }, - endPoint: { - x: 559.5, - y: 350, - anchorIndex: 0, - id: '559.5|||350', - }, - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 12, - fontWeight: 500, - }, - }, - }, - { - id: '120-150', - source: '120', - target: '150', - data: {}, - type: 'polyline', - style: { - offset: 20, - radius: 2, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - startPoint: { - x: 259.5, - y: 150, - anchorIndex: 0, - id: '259.5|||150', - }, - endPoint: { - x: 259.5, - y: 250, - anchorIndex: 0, - id: '259.5|||250', - }, - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 12, - fontWeight: 500, - }, - }, - }, - { - id: '150-180', - source: '150', - target: '180', - data: {}, - type: 'polyline', - style: { - offset: 20, - radius: 2, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - startPoint: { - x: 340.5, - y: 250, - anchorIndex: 1, - id: '340.5|||250', - }, - endPoint: { - x: 409.5, - y: 150, - anchorIndex: 0, - id: '409.5|||150', - }, - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 12, - fontWeight: 500, - }, - }, - }, - { - id: '160-120', - source: '160', - target: '120', - type: 'polyline', - style: { - offset: 20, - radius: 2, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - startPoint: { - x: 659.5, - y: 250, - anchorIndex: 0, - id: '659.5|||250', - }, - endPoint: { - x: 340.5, - y: 150, - anchorIndex: 1, - id: '340.5|||150', - }, - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 12, - fontWeight: 500, - }, - }, - }, - { - id: '160-180', - source: '160', - target: '180', - type: 'polyline', - style: { - offset: 20, - radius: 2, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - startPoint: { - x: 659.5, - y: 250, - anchorIndex: 0, - id: '659.5|||250', - }, - endPoint: { - x: 490.5, - y: 150, - anchorIndex: 1, - id: '490.5|||150', - }, - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 12, - fontWeight: 500, - }, - }, - }, - { - id: '160-110', - source: '160', - target: '110', - type: 'polyline', - style: { - offset: 20, - radius: 2, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - startPoint: { - x: 659.5, - y: 250, - anchorIndex: 0, - id: '659.5|||250', - }, - endPoint: { - x: 640.5, - y: 350, - anchorIndex: 1, - id: '640.5|||350', - }, - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 12, - fontWeight: 500, - }, - }, - }, - { - id: '150-190', - source: '150', - target: '190', - type: 'polyline', - style: { - offset: 20, - radius: 2, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - startPoint: { - x: 259.5, - y: 250, - anchorIndex: 0, - id: '259.5|||250', - }, - endPoint: { - x: 159.5, - y: 338, - anchorIndex: 1, - id: '159.5|||338', - }, - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 12, - fontWeight: 500, - }, - }, - }, - { - id: 'ems-upf', - source: 'combo-ems', - target: 'combo-upf', - type: 'polyline', - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(234, 234, 234)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(245, 245, 245)', - lineWidth: 1, - }, - offset: 20, - radius: 2, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - isComboEdge: true, - startPoint: { - x: 167, - y: 445, - anchorIndex: 1, - id: '167|||445', - }, - endPoint: { - x: 58, - y: 333, - anchorIndex: 0, - id: '58|||333', - }, - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 12, - fontWeight: 500, - }, - }, - }, - { - id: 'ems-ims', - source: 'combo-ems', - target: 'combo-ims', - type: 'polyline', - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(234, 234, 234)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(245, 245, 245)', - lineWidth: 1, - }, - offset: 20, - radius: 2, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - isComboEdge: true, - startPoint: { - x: 167, - y: 445, - anchorIndex: 1, - id: '167|||445', - }, - endPoint: { - x: 539, - y: 345, - anchorIndex: 0, - id: '539|||345', - }, - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 12, - fontWeight: 500, - }, - }, - }, - { - id: '0~1703575912428~combo-upf', - source: '0', - target: 'combo-upf', - type: 'cubic-vertical', - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(234, 234, 234)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(245, 245, 245)', - lineWidth: 1, - }, - offset: 20, - radius: 2, - stroke: '#eeff00', - lineWidth: 13, - cursor: 'pointer', - startArrow: true, - }, - label: '', - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 14, - fontWeight: 400, - }, - }, - isComboEdge: true, - startPoint: { - x: 415, - y: 457, - }, - endPoint: { - x: 58, - y: 333, - anchorIndex: 0, - }, - curvePosition: [0.5, 0.5], - minCurveOffset: [0, 0], - }, - { - id: 'combo-upf~1703575945004~1', - source: 'combo-upf', - target: '1', - type: 'polyline', - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(234, 234, 234)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(245, 245, 245)', - lineWidth: 1, - }, - offset: 20, - radius: 2, - stroke: '#4202f2', - lineWidth: 12, - cursor: 'pointer', - endArrow: true, - startArrow: true, - }, - label: '3分3发', - labelCfg: { - refX: 0, - refY: 0, - position: 'end', - autoRotate: true, - style: { - fill: '#fa9e00', - fontSize: 14, - fontWeight: 400, - }, - }, - isComboEdge: true, - startPoint: { - x: 180, - y: 333, - anchorIndex: 1, - id: '180|||333', - }, - endPoint: { - x: 91.5, - y: 42, - anchorIndex: 0, - id: '91.5|||42', - }, - curvePosition: [0.5, 0.5], - minCurveOffset: [0, 0], - }, - { - id: 'combo-ems~1703575966436~2', - source: 'combo-ems', - target: '2', - type: 'quadratic', - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(234, 234, 234)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(245, 245, 245)', - lineWidth: 1, - }, - offset: 20, - radius: 2, - stroke: '#20cb81', - lineWidth: 12, - cursor: 'pointer', - }, - label: '', - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 14, - fontWeight: 400, - }, - }, - isComboEdge: true, - startPoint: { - x: 167, - y: 445, - anchorIndex: 1, - }, - endPoint: { - x: 706.5, - y: 431, - anchorIndex: 0, - }, - curvePosition: 0.5, - minCurveOffset: [0, 0], - curveOffset: -20, - }, - { - id: 'combo-ems~1703575974507~combo-5gc', - source: 'combo-ems', - target: 'combo-5gc', - type: 'polyline', - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(234, 234, 234)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(245, 245, 245)', - lineWidth: 1, - }, - offset: 20, - radius: 2, - stroke: '#cc1e1e', - lineWidth: 1, - cursor: 'pointer', - }, - label: '', - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 14, - fontWeight: 400, - }, - }, - isComboEdge: true, - startPoint: { - x: 167, - y: 445, - anchorIndex: 1, - id: '167|||445', - }, - endPoint: { - x: 239, - y: 145, - anchorIndex: 0, - id: '239|||145', - }, - curvePosition: [0.5, 0.5], - minCurveOffset: [0, 0], - }, - { - id: '150~1703575985251~160', - source: '150', - target: '160', - type: 'polyline', - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(234, 234, 234)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(245, 245, 245)', - lineWidth: 1, - }, - offset: 20, - radius: 2, - stroke: '#5eab4f', - lineWidth: 5, - cursor: 'pointer', - endArrow: true, - }, - label: '', - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 14, - fontWeight: 400, - }, - }, - isComboEdge: true, - startPoint: { - x: 340.5, - y: 250, - anchorIndex: 1, - id: '340.5|||250', - }, - endPoint: { - x: 659.5, - y: 250, - anchorIndex: 0, - id: '659.5|||250', - }, - curvePosition: [0.5, 0.5], - minCurveOffset: [0, 0], - }, - { - id: '0-5gc', - source: '0', - target: 'combo-5gc', - type: 'polyline', - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(234, 234, 234)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(245, 245, 245)', - lineWidth: 1, - }, - offset: 20, - radius: 2, - stroke: '#ffffff', - lineWidth: 1, - cursor: 'pointer', - }, - isComboEdge: true, - startPoint: { - x: 421.20060794856374, - y: 457.78115483619814, - id: '421.20060794856374|||457.78115483619814', - }, - endPoint: { - x: 239, - y: 145, - anchorIndex: 0, - id: '239|||145', - }, - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 12, - fontWeight: 500, - }, - }, - }, - { - id: 'combo-upf~1703576027131~combo-ims', - source: 'combo-upf', - target: 'combo-ims', - type: 'polyline', - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(234, 234, 234)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(245, 245, 245)', - lineWidth: 1, - }, - offset: 20, - radius: 2, - stroke: '#7f5757', - lineWidth: 5, - cursor: 'pointer', - }, - label: '3分3发', - labelCfg: { - refX: 2, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 14, - fontWeight: 400, - }, - }, - isComboEdge: true, - startPoint: { - x: 180, - y: 333, - anchorIndex: 1, - id: '180|||333', - }, - endPoint: { - x: 539, - y: 345, - anchorIndex: 0, - id: '539|||345', - }, - curvePosition: [0.5, 0.5], - minCurveOffset: [0, 0], - }, - { - id: '130~1703576145468~120', - source: '130', - target: '120', - type: 'polyline', - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(234, 234, 234)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(245, 245, 245)', - lineWidth: 1, - }, - offset: 20, - radius: 2, - stroke: '#492727', - lineWidth: 1, - cursor: 'pointer', - }, - label: '', - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 14, - fontWeight: 400, - }, - }, - isComboEdge: true, - startPoint: { - x: 409.5, - y: 50, - anchorIndex: 0, - id: '409.5|||50', - }, - endPoint: { - x: 340.5, - y: 150, - anchorIndex: 1, - id: '340.5|||150', - }, - curvePosition: [0.5, 0.5], - minCurveOffset: [0, 0], - }, - { - id: '130~1703576154675~180', - source: '130', - target: '180', - type: 'polyline', - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(234, 234, 234)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(245, 245, 245)', - lineWidth: 1, - }, - offset: 20, - radius: 2, - stroke: '#9a0e0e', - lineWidth: 7, - cursor: 'pointer', - }, - label: '', - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 14, - fontWeight: 400, - }, - }, - isComboEdge: true, - startPoint: { - x: 409.5, - y: 50, - anchorIndex: 0, - id: '409.5|||50', - }, - endPoint: { - x: 409.5, - y: 150, - anchorIndex: 0, - id: '409.5|||150', - }, - curvePosition: [0.5, 0.5], - minCurveOffset: [0, 0], - }, - { - id: '140~1703576175859~150', - source: '140', - target: '150', - type: 'polyline', - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(234, 234, 234)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(245, 245, 245)', - lineWidth: 1, - }, - offset: 20, - radius: 2, - stroke: '#a63636', - lineWidth: 3, - cursor: 'pointer', - }, - label: '3分3发', - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 14, - fontWeight: 400, - }, - }, - isComboEdge: true, - startPoint: { - x: 559.5, - y: 50, - anchorIndex: 0, - id: '559.5|||50', - }, - endPoint: { - x: 340.5, - y: 250, - anchorIndex: 1, - id: '340.5|||250', - }, - curvePosition: [0.5, 0.5], - minCurveOffset: [0, 0], - }, - { - id: '140~1703575996915~180', - source: '140', - target: '180', - type: 'polyline', - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(234, 234, 234)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(245, 245, 245)', - lineWidth: 1, - }, - offset: 20, - radius: 2, - stroke: '#3de6e3', - lineWidth: 4, - cursor: 'pointer', - }, - label: '', - labelCfg: { - refX: 0, - refY: 0, - position: 'middle', - autoRotate: false, - style: { - fill: '#ffffff', - fontSize: 14, - fontWeight: 400, - }, - }, - isComboEdge: true, - startPoint: { - x: 559.5, - y: 50, - anchorIndex: 0, - id: '559.5|||50', - }, - endPoint: { - x: 490.5, - y: 150, - anchorIndex: 1, - id: '490.5|||150', - }, - curvePosition: [0.5, 0.5], - minCurveOffset: [0, 0], - }, - ], - combos: [ - { - id: 'combo-5gc', - label: 'combo 5GC控制面', - children: [ +const graphG6Data = reactive>({ + "nodes": [ { - id: '170', - comboId: 'combo-5gc', - itemType: 'node', - depth: 12, + "id": "Line", + "comboId": "", + "x": 411, + "y": 8, + "type": "rect", + "size": [ + 600, + 10 + ], + "anchorPoints": false, + "style": { + "active": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10 + }, + "selected": { + "fill": "rgb(255, 255, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 4, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "fill": "rgb(223, 234, 255)", + "stroke": "#4572d9", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(191, 213, 255)", + "lineWidth": 1 + }, + "disable": { + "fill": "rgb(250, 250, 250)", + "stroke": "rgb(224, 224, 224)", + "lineWidth": 1 + }, + "radius": 4, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer", + "fill": "#ffffff" + }, + "label": "", + "labelCfg": { + "position": "center", + "offset": 0, + "style": { + "fill": "#000000", + "fontSize": 12, + "fontWeight": 500 + } + }, + "icon": { + "show": false, + "img": "/svg/service.svg", + "width": 25, + "height": 25, + "offset": 20 + }, + "direction": "up", + "depth": 17 }, { - id: '130', - comboId: 'combo-5gc', - itemType: 'node', - depth: 12, + "id": "NSSF", + "comboId": "", + "x": 180, + "y": -121, + "type": "rect", + "size": [ + 80, + 40 + ], + "anchorPoints": false, + "style": { + "active": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10 + }, + "selected": { + "fill": "rgb(255, 255, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 4, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "fill": "rgb(223, 234, 255)", + "stroke": "#4572d9", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(191, 213, 255)", + "lineWidth": 1 + }, + "disable": { + "fill": "rgb(250, 250, 250)", + "stroke": "rgb(224, 224, 224)", + "lineWidth": 1 + }, + "radius": 4, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer", + "fill": "#ffffff" + }, + "label": "NSSF", + "labelCfg": { + "position": "center", + "offset": 0, + "style": { + "fill": "#000000", + "fontSize": 12, + "fontWeight": 500 + } + }, + "icon": { + "show": false, + "img": "/svg/service.svg", + "width": 25, + "height": 25, + "offset": 20 + }, + "direction": "up", + "depth": 17 }, { - id: '140', - comboId: 'combo-5gc', - itemType: 'node', - depth: 12, + "id": "NEF", + "comboId": "", + "x": 295, + "y": -122, + "type": "rect", + "size": [ + 80, + 40 + ], + "anchorPoints": false, + "style": { + "active": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10 + }, + "selected": { + "fill": "rgb(255, 255, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 4, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "fill": "rgb(223, 234, 255)", + "stroke": "#4572d9", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(191, 213, 255)", + "lineWidth": 1 + }, + "disable": { + "fill": "rgb(250, 250, 250)", + "stroke": "rgb(224, 224, 224)", + "lineWidth": 1 + }, + "radius": 4, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer", + "fill": "#ffffff" + }, + "label": "NEF", + "labelCfg": { + "position": "center", + "offset": 0, + "style": { + "fill": "#000000", + "fontSize": 12, + "fontWeight": 500 + } + }, + "icon": { + "show": false, + "img": "/svg/service.svg", + "width": 25, + "height": 25, + "offset": 20 + }, + "direction": "up", + "depth": 17 }, { - id: '120', - comboId: 'combo-5gc', - itemType: 'node', - depth: 12, + "id": "NRF", + "comboId": "", + "x": 422, + "y": -124, + "type": "rect", + "size": [ + 80, + 40 + ], + "anchorPoints": false, + "style": { + "active": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10 + }, + "selected": { + "fill": "rgb(255, 255, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 4, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "fill": "rgb(223, 234, 255)", + "stroke": "#4572d9", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(191, 213, 255)", + "lineWidth": 1 + }, + "disable": { + "fill": "rgb(250, 250, 250)", + "stroke": "rgb(224, 224, 224)", + "lineWidth": 1 + }, + "radius": 4, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer", + "fill": "#ffffff" + }, + "label": "NRF", + "labelCfg": { + "position": "center", + "offset": 0, + "style": { + "fill": "#000000", + "fontSize": 12, + "fontWeight": 500 + } + }, + "icon": { + "show": false, + "img": "/svg/service.svg", + "width": 25, + "height": 25, + "offset": 20 + }, + "direction": "up", + "depth": 17 }, { - id: '180', - comboId: 'combo-5gc', - itemType: 'node', - depth: 12, + "id": "PCF", + "comboId": "", + "x": 535, + "y": -124, + "type": "rect", + "size": [ + 80, + 40 + ], + "anchorPoints": false, + "style": { + "active": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10 + }, + "selected": { + "fill": "rgb(255, 255, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 4, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "fill": "rgb(223, 234, 255)", + "stroke": "#4572d9", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(191, 213, 255)", + "lineWidth": 1 + }, + "disable": { + "fill": "rgb(250, 250, 250)", + "stroke": "rgb(224, 224, 224)", + "lineWidth": 1 + }, + "radius": 4, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer", + "fill": "#ffffff" + }, + "label": "PCF", + "labelCfg": { + "position": "center", + "offset": 0, + "style": { + "fill": "#000000", + "fontSize": 12, + "fontWeight": 500 + } + }, + "icon": { + "show": false, + "img": "/svg/service.svg", + "width": 25, + "height": 25, + "offset": 20 + }, + "direction": "up" }, { - id: '150', - comboId: 'combo-5gc', - itemType: 'node', - depth: 12, + "id": "UDM", + "comboId": "", + "x": 648, + "y": -120, + "type": "rect", + "size": [ + 80, + 40 + ], + "anchorPoints": false, + "style": { + "active": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10 + }, + "selected": { + "fill": "rgb(255, 255, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 4, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "fill": "rgb(223, 234, 255)", + "stroke": "#4572d9", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(191, 213, 255)", + "lineWidth": 1 + }, + "disable": { + "fill": "rgb(250, 250, 250)", + "stroke": "rgb(224, 224, 224)", + "lineWidth": 1 + }, + "radius": 4, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer", + "fill": "#ffffff" + }, + "label": "UDM", + "labelCfg": { + "position": "center", + "offset": 0, + "style": { + "fill": "#000000", + "fontSize": 12, + "fontWeight": 500 + } + }, + "icon": { + "show": false, + "img": "/svg/service.svg", + "width": 25, + "height": 25, + "offset": 20 + }, + "direction": "up" }, { - id: '160', - comboId: 'combo-5gc', - itemType: 'node', - depth: 12, + "id": "AUSF", + "comboId": "", + "x": 175, + "y": 115, + "type": "rect", + "size": [ + 80, + 40 + ], + "anchorPoints": false, + "style": { + "active": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10 + }, + "selected": { + "fill": "rgb(255, 255, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 4, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "fill": "rgb(223, 234, 255)", + "stroke": "#4572d9", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(191, 213, 255)", + "lineWidth": 1 + }, + "disable": { + "fill": "rgb(250, 250, 250)", + "stroke": "rgb(224, 224, 224)", + "lineWidth": 1 + }, + "radius": 4, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer", + "fill": "#ffffff" + }, + "label": "AUSF", + "labelCfg": { + "position": "center", + "offset": 0, + "style": { + "fill": "#000000", + "fontSize": 12, + "fontWeight": 500 + } + }, + "icon": { + "show": false, + "img": "/svg/service.svg", + "width": 25, + "height": 25, + "offset": 20 + }, + "direction": "up" }, - ], - depth: 10, - type: 'rect', - size: [40, 40], - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - fill: 'rgb(247, 250, 255)', - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - fill: 'rgb(253, 253, 253)', - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: '#4572d9', - lineWidth: 2, - fill: 'rgb(253, 253, 253)', - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(224, 224, 224)', - fill: 'rgb(253, 253, 253)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(234, 234, 234)', - fill: 'rgb(250, 250, 250)', - lineWidth: 1, - }, - fillOpacity: 0.1, - r: 240.5, - width: 481, - height: 241, - }, - x: 500, - y: 150, - }, - { - id: 'combo-upf', - label: 'combo upf', - children: [ { - id: '190', - comboId: 'combo-upf', - itemType: 'node', - depth: 29, + "id": "AMF", + "comboId": "", + "x": 290, + "y": 120, + "type": "rect", + "size": [ + 80, + 40 + ], + "anchorPoints": false, + "style": { + "active": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10 + }, + "selected": { + "fill": "rgb(255, 255, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 4, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "fill": "rgb(223, 234, 255)", + "stroke": "#4572d9", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(191, 213, 255)", + "lineWidth": 1 + }, + "disable": { + "fill": "rgb(250, 250, 250)", + "stroke": "rgb(224, 224, 224)", + "lineWidth": 1 + }, + "radius": 4, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer", + "fill": "#ffffff" + }, + "label": "AMF", + "labelCfg": { + "position": "center", + "offset": 0, + "style": { + "fill": "#000000", + "fontSize": 12, + "fontWeight": 500 + } + }, + "icon": { + "show": false, + "img": "/svg/service.svg", + "width": 25, + "height": 25, + "offset": 20 + }, + "direction": "up" }, - ], - depth: 27, - type: 'rect', - size: [40, 40], - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - fill: 'rgb(247, 250, 255)', - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - fill: 'rgb(253, 253, 253)', - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: '#4572d9', - lineWidth: 2, - fill: 'rgb(253, 253, 253)', - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(224, 224, 224)', - fill: 'rgb(253, 253, 253)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(234, 234, 234)', - fill: 'rgb(250, 250, 250)', - lineWidth: 1, - }, - fillOpacity: 0.1, - r: 40.5, - width: 81, - height: 41, - }, - x: 119, - y: 338, - }, - { - id: 'combo-ims', - label: 'combo ims', - children: [ { - id: '110', - comboId: 'combo-ims', - itemType: 'node', - depth: 40, + "id": "SMF", + "comboId": "", + "x": 658, + "y": 123, + "type": "rect", + "size": [ + 80, + 40 + ], + "anchorPoints": false, + "style": { + "active": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10 + }, + "selected": { + "fill": "rgb(255, 255, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 4, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "fill": "rgb(223, 234, 255)", + "stroke": "#4572d9", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(191, 213, 255)", + "lineWidth": 1 + }, + "disable": { + "fill": "rgb(250, 250, 250)", + "stroke": "rgb(224, 224, 224)", + "lineWidth": 1 + }, + "radius": 4, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer", + "fill": "#ffffff" + }, + "label": "SMF", + "labelCfg": { + "position": "center", + "offset": 0, + "style": { + "fill": "#000000", + "fontSize": 12, + "fontWeight": 500 + } + }, + "icon": { + "show": false, + "img": "/svg/service.svg", + "width": 25, + "height": 25, + "offset": 20 + }, + "direction": "up" }, - ], - depth: 38, - type: 'rect', - size: [40, 40], - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - fill: 'rgb(247, 250, 255)', - }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - fill: 'rgb(253, 253, 253)', - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, - }, - highlight: { - stroke: '#4572d9', - lineWidth: 2, - fill: 'rgb(253, 253, 253)', - 'text-shape': { - fontWeight: 500, - }, - }, - inactive: { - stroke: 'rgb(224, 224, 224)', - fill: 'rgb(253, 253, 253)', - lineWidth: 1, - }, - disable: { - stroke: 'rgb(234, 234, 234)', - fill: 'rgb(250, 250, 250)', - lineWidth: 1, - }, - fillOpacity: 0.1, - r: 40.5, - width: 81, - height: 41, - }, - x: 600, - y: 350, - }, - { - id: 'combo-ems', - label: 'Combo ems', - children: [ { - id: '100', - comboId: 'combo-ems', - itemType: 'node', - depth: 51, + "id": "UE", + "comboId": "", + "x": 177, + "y": 257, + "type": "rect", + "size": [ + 80, + 40 + ], + "anchorPoints": false, + "style": { + "active": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10 + }, + "selected": { + "fill": "rgb(255, 255, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 4, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "fill": "rgb(223, 234, 255)", + "stroke": "#4572d9", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(191, 213, 255)", + "lineWidth": 1 + }, + "disable": { + "fill": "rgb(250, 250, 250)", + "stroke": "rgb(224, 224, 224)", + "lineWidth": 1 + }, + "radius": 4, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer", + "fill": "#ffffff" + }, + "label": "UE", + "labelCfg": { + "position": "center", + "offset": 0, + "style": { + "fill": "#000000", + "fontSize": 12, + "fontWeight": 500 + } + }, + "icon": { + "show": false, + "img": "/svg/service.svg", + "width": 25, + "height": 25, + "offset": 20 + }, + "direction": "up" }, - ], - depth: 49, - type: 'rect', - size: [40, 40], - style: { - active: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 1, - fill: 'rgb(247, 250, 255)', + { + "id": "RAN", + "comboId": "", + "x": 296, + "y": 256, + "type": "rect", + "size": [ + 80, + 40 + ], + "anchorPoints": false, + "style": { + "active": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10 + }, + "selected": { + "fill": "rgb(255, 255, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 4, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "fill": "rgb(223, 234, 255)", + "stroke": "#4572d9", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(191, 213, 255)", + "lineWidth": 1 + }, + "disable": { + "fill": "rgb(250, 250, 250)", + "stroke": "rgb(224, 224, 224)", + "lineWidth": 1 + }, + "radius": 4, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer", + "fill": "#ffffff" + }, + "label": "(R)AN", + "labelCfg": { + "position": "center", + "offset": 0, + "style": { + "fill": "#000000", + "fontSize": 12, + "fontWeight": 500 + } + }, + "icon": { + "show": false, + "img": "/svg/service.svg", + "width": 25, + "height": 25, + "offset": 20 + }, + "direction": "up" }, - selected: { - stroke: 'rgb(95, 149, 255)', - lineWidth: 2, - fill: 'rgb(253, 253, 253)', - shadowColor: 'rgb(95, 149, 255)', - shadowBlur: 10, - 'text-shape': { - fontWeight: 500, - }, + { + "id": "UPF", + "comboId": "", + "x": 467, + "y": 258, + "type": "rect", + "size": [ + 80, + 40 + ], + "anchorPoints": false, + "style": { + "active": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10 + }, + "selected": { + "fill": "rgb(255, 255, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 4, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "fill": "rgb(223, 234, 255)", + "stroke": "#4572d9", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(191, 213, 255)", + "lineWidth": 1 + }, + "disable": { + "fill": "rgb(250, 250, 250)", + "stroke": "rgb(224, 224, 224)", + "lineWidth": 1 + }, + "radius": 4, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer", + "fill": "#ffffff" + }, + "label": "UPF", + "labelCfg": { + "position": "center", + "offset": 0, + "style": { + "fill": "#000000", + "fontSize": 12, + "fontWeight": 500 + } + }, + "icon": { + "show": false, + "img": "/svg/service.svg", + "width": 25, + "height": 25, + "offset": 20 + }, + "direction": "up" }, - highlight: { - stroke: '#4572d9', - lineWidth: 2, - fill: 'rgb(253, 253, 253)', - 'text-shape': { - fontWeight: 500, - }, + { + "id": "DN", + "comboId": "", + "x": 658, + "y": 258, + "type": "rect", + "size": [ + 80, + 40 + ], + "anchorPoints": false, + "style": { + "active": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10 + }, + "selected": { + "fill": "rgb(255, 255, 255)", + "stroke": "rgb(95, 149, 255)", + "lineWidth": 4, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "fill": "rgb(223, 234, 255)", + "stroke": "#4572d9", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "fill": "rgb(247, 250, 255)", + "stroke": "rgb(191, 213, 255)", + "lineWidth": 1 + }, + "disable": { + "fill": "rgb(250, 250, 250)", + "stroke": "rgb(224, 224, 224)", + "lineWidth": 1 + }, + "radius": 4, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer", + "fill": "#ffffff" + }, + "label": "DN", + "labelCfg": { + "position": "center", + "offset": 0, + "style": { + "fill": "#000000", + "fontSize": 12, + "fontWeight": 500 + } + }, + "icon": { + "show": false, + "img": "/svg/service.svg", + "width": 25, + "height": 25, + "offset": 20 + }, + "direction": "up" + } + ], + "edges": [ + { + "source": "AMF", + "target": "Line", + "type": "line", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.11981867704581341703841767779", + "startPoint": { + "x": 330.5, + "y": 120, + "anchorIndex": 1 + }, + "endPoint": { + "x": 110.5, + "y": 8, + "anchorIndex": 0 + }, + "label": "", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] }, - inactive: { - stroke: 'rgb(224, 224, 224)', - fill: 'rgb(253, 253, 253)', - lineWidth: 1, + { + "source": "AUSF", + "target": "Line", + "type": "line", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.502694162132931703841772498", + "startPoint": { + "x": 215.5, + "y": 115, + "anchorIndex": 1 + }, + "endPoint": { + "x": 110.5, + "y": 8, + "anchorIndex": 0 + }, + "label": "", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] }, - disable: { - stroke: 'rgb(234, 234, 234)', - fill: 'rgb(250, 250, 250)', - lineWidth: 1, + { + "source": "SMF", + "target": "Line", + "type": "line", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.260404240874495761703841774826", + "startPoint": { + "x": 617.5, + "y": 123, + "anchorIndex": 0 + }, + "endPoint": { + "x": 711.5, + "y": 8, + "anchorIndex": 1 + }, + "label": "", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] }, - fillOpacity: 0.1, - r: 40.5, - width: 81, - height: 41, - }, - x: 106, - y: 450, - }, - ], + { + "source": "NRF", + "target": "Line", + "type": "line", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.28704089456488681703841777219", + "startPoint": { + "x": 381.5, + "y": -124, + "anchorIndex": 0 + }, + "endPoint": { + "x": 711.5, + "y": 8, + "anchorIndex": 1 + }, + "label": "", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] + }, + { + "source": "PCF", + "target": "Line", + "type": "line", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.76458236966930771703841780339", + "startPoint": { + "x": 494.5, + "y": -124, + "anchorIndex": 0 + }, + "endPoint": { + "x": 711.5, + "y": 8, + "anchorIndex": 1 + }, + "label": "", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] + }, + { + "source": "UDM", + "target": "Line", + "type": "line", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.99834745625389031703841782483", + "startPoint": { + "x": 607.5, + "y": -120, + "anchorIndex": 0 + }, + "endPoint": { + "x": 711.5, + "y": 8, + "anchorIndex": 1 + }, + "label": "", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] + }, + { + "source": "NEF", + "target": "Line", + "type": "line", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.69352800289023461703841784851", + "startPoint": { + "x": 335.5, + "y": -122, + "anchorIndex": 1 + }, + "endPoint": { + "x": 110.5, + "y": 8, + "anchorIndex": 0 + }, + "label": "", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] + }, + { + "source": "NSSF", + "target": "Line", + "type": "line", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.460774926435537861703841787403", + "startPoint": { + "x": 220.5, + "y": -121, + "anchorIndex": 1 + }, + "endPoint": { + "x": 110.5, + "y": 8, + "anchorIndex": 0 + }, + "label": "", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] + }, + { + "source": "UE", + "target": "AMF", + "type": "line", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.30252486888720641703842017331", + "startPoint": { + "x": 217.5, + "y": 257, + "anchorIndex": 1 + }, + "endPoint": { + "x": 249.5, + "y": 120, + "anchorIndex": 0 + }, + "label": "N1", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] + }, + { + "source": "UE", + "target": "RAN", + "type": "line", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.72510896317134321703842033956", + "startPoint": { + "x": 217.5, + "y": 257, + "anchorIndex": 1 + }, + "endPoint": { + "x": 255.5, + "y": 256, + "anchorIndex": 0 + }, + "label": "", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] + }, + { + "source": "AMF", + "target": "RAN", + "type": "line", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.311629397724459741703842036348", + "startPoint": { + "x": 330.5, + "y": 120, + "anchorIndex": 1 + }, + "endPoint": { + "x": 255.5, + "y": 256, + "anchorIndex": 0 + }, + "label": "N2", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] + }, + { + "source": "UPF", + "target": "RAN", + "type": "line", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.7318867804621741703842102865", + "startPoint": { + "x": 426.5, + "y": 258, + "anchorIndex": 0 + }, + "endPoint": { + "x": 336.5, + "y": 256, + "anchorIndex": 1 + }, + "label": "N3", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] + }, + { + "source": "SMF", + "target": "UPF", + "type": "line", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.65170685308868251703842127914", + "startPoint": { + "x": 617.5, + "y": 123, + "anchorIndex": 0 + }, + "endPoint": { + "x": 507.5, + "y": 258, + "anchorIndex": 1, + "id": "507.5|||258" + }, + "label": "N4", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] + }, + { + "source": "UPF", + "target": "UPF", + "type": "loop", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.208028812332049281703842141315", + "startPoint": { + "x": 456.75, + "y": 237.5 + }, + "endPoint": { + "x": 477.25, + "y": 237.5 + }, + "label": "N9", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] + }, + { + "source": "UPF", + "target": "DN", + "type": "line", + "style": { + "active": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 1 + }, + "selected": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "shadowColor": "rgb(95, 149, 255)", + "shadowBlur": 10, + "text-shape": { + "fontWeight": 500 + } + }, + "highlight": { + "stroke": "rgb(95, 149, 255)", + "lineWidth": 2, + "text-shape": { + "fontWeight": 500 + } + }, + "inactive": { + "stroke": "rgb(234, 234, 234)", + "lineWidth": 1 + }, + "disable": { + "stroke": "rgb(245, 245, 245)", + "lineWidth": 1 + }, + "offset": 20, + "radius": 2, + "stroke": "#ffffff", + "lineWidth": 1, + "cursor": "pointer" + }, + "labelCfg": { + "refX": 0, + "refY": 0, + "position": "middle", + "autoRotate": false, + "style": { + "fill": "#ffffff", + "fontSize": 12, + "fontWeight": 500 + } + }, + "id": "edge-0.77600757276927081703842249604", + "startPoint": { + "x": 507.5, + "y": 258, + "anchorIndex": 1, + "id": "507.5|||258" + }, + "endPoint": { + "x": 617.5, + "y": 258, + "anchorIndex": 0, + "id": "617.5|||258" + }, + "label": "N6", + "curveOffset": [ + 20, + -20 + ], + "curvePosition": [ + 0.5, + 0.5 + ], + "minCurveOffset": [ + 0, + 0 + ] + } + ], + "combos": [] }); // 将数据渲染到画布