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

feat: 关系图

Browse Source
This commit is contained in:
TsMask
2023-12-15 18:30:46 +08:00
parent f015f45601
commit 1c44651ad2
1 changed files with 126 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

614
src/views/monitor/topology/index.vue
View File

@@ -16,8 +16,6 @@ const graphG6Dom = ref<HTMLElement | undefined>(undefined);
/**图实例对象 */
let graphChart: any = null;
/**图DOM节点实例对象 */
const graphData = reactive<GraphData>({
nodes: [],
@@ -30,175 +28,144 @@ const data = {
// 0 基站
{
id: '0',
data: {
x: 50,
y: 150,
type: 'circle-node',
color: '#fffff',
keyShape: {
r: 24,
width: 48,
height: 48,
fill: '#9EC9FF',
stroke: '#5B8FF9',
lineWidth: 2,
},
labelShape: {
text: '基站',
position: 'bottom',
maxWidth: '200%',
offsetY: 10,
},
labelBackgroundShape: {},
iconShape: {
img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
width: 24,
height: 24,
x: 50,
y: 150,
size: 48,
type: 'circle',
label: '基站',
labelCfg: {
position: 'bottom',
offset: 10,
style: {
fill: '#333',
stroke: '#fff',
lineWidth: 10,
},
},
style: {
fill: '#9EC9FF',
stroke: '#5B8FF9',
lineWidth: 2,
},
icon: {
show: true,
// 可更换为其他图片地址
img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
width: 24,
height: 24,
},
},
// 1 DM
{
id: '1',
data: {
label: 'DM',
x: 450,
y: 450,
keyShape: {
width: 80,
height: 40,
radius: 8,
fill: '#00b050',
},
labelShape: {
position: 'center',
text: 'DM',
fill: '#fff', // 节点标签文字颜色
},
x: 450,
y: 450,
label: 'DM',
labelCfg: {
position: 'center',
},
style: {
fill: '#00b050',
stroke: '#00b050',
lineWidth: 1,
},
},
// 2 O&M
{
id: '2',
data: {
label: 'O&M',
x: 50,
y: 450,
},
x: 50,
y: 450,
label: 'O&M',
},
// 100 EMS
{
id: '100',
data: {
label: 'EMS',
parentId: 'combo-ems',
x: 300,
y: 450,
},
label: 'EMS',
comboId: 'combo-ems',
x: 300,
y: 450,
},
// 190 UPF
{
id: '190',
data: {
parentId: 'combo-upf',
x: 300,
y: 350,
keyShape: {
width: 80,
height: 40,
radius: 8,
fill: '#d580ff',
},
labelShape: {
position: 'center',
text: 'UPF',
fill: '#fff', // 节点标签文字颜色
},
comboId: 'combo-upf',
x: 300,
y: 350,
label: 'UPF',
labelCfg: {
position: 'center',
},
style: {
fill: '#d580ff',
stroke: '#d580ff',
lineWidth: 1,
},
},
// EP-IMS
{
id: '110',
data: {
parentId: 'combo-ims',
x: 600,
y: 350,
keyShape: {
width: 80,
height: 40,
radius: 8,
fill: '#ed7d31',
},
labelShape: {
position: 'center',
text: 'IMS',
fill: '#fff', // 节点标签文字颜色
},
comboId: 'combo-ims',
x: 600,
y: 350,
label: 'IMS',
labelCfg: {
position: 'center',
},
style: {
fill: '#ed7d31',
stroke: '#ed7d31',
lineWidth: 1,
},
},
// 5GC控制面
{
id: '170',
data: {
label: 'NSSF',
parentId: 'combo-5gc',
x: 300,
y: 50,
},
label: 'NSSF',
comboId: 'combo-5gc',
x: 300,
y: 50,
},
{
id: '130',
data: {
label: 'AUSF',
parentId: 'combo-5gc',
x: 450,
y: 50,
},
label: 'AUSF',
comboId: 'combo-5gc',
x: 450,
y: 50,
},
{
id: '140',
data: {
label: 'UDM',
parentId: 'combo-5gc',
x: 600,
y: 50,
},
label: 'UDM',
comboId: 'combo-5gc',
x: 600,
y: 50,
},
{
id: '120',
data: {
label: 'AMF',
parentId: 'combo-5gc',
x: 300,
y: 150,
},
label: 'AMF',
comboId: 'combo-5gc',
x: 300,
y: 150,
},
{
id: '180',
data: {
label: 'NRF',
parentId: 'combo-5gc',
x: 450,
y: 150,
},
label: 'NRF',
comboId: 'combo-5gc',
x: 450,
y: 150,
},
{
id: '150',
data: {
label: 'SMF',
parentId: 'combo-5gc',
x: 300,
y: 250,
},
label: 'SMF',
comboId: 'combo-5gc',
x: 300,
y: 250,
},
{
id: '160',
data: {
label: 'PCF',
parentId: 'combo-5gc',
x: 700,
y: 250,
},
label: 'PCF',
comboId: 'combo-5gc',
x: 700,
y: 250,
},
],
edges: [
@@ -206,142 +173,62 @@ const data = {
id: '0-5gc',
source: '0',
target: 'combo-5gc',
data: {},
},
{
id: '0-upf',
source: '0',
target: 'combo-upf',
data: {
keyShape: {
radius: 4,
controlPoints: [
{ x: 150, y: 150 },
{ x: 150, y: 350 },
],
lineWidth: 1,
stroke: '#d580ff',
},
labelShape: {
text: 'N3',
position: 'end',
autoRotate: true,
offsetY: 10,
},
labelBackgroundShape: {},
},
},
{
id: 'upf-1',
source: 'combo-upf',
target: '1',
data: {
keyShape: {
radius: 4,
controlPoints: [{ x: 400, y: 400 }],
lineWidth: 1,
stroke: '#d580ff',
},
labelShape: {
text: 'N6',
position: 'start',
autoRotate: true,
offsetX: 10,
},
labelBackgroundShape: {},
},
},
{
id: 'ems-2',
source: 'combo-ems',
target: '2',
data: { type: 'cubic-edge' },
},
{
id: '170-120',
source: '170',
target: '120',
data: {},
},
{
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: {
endArrow: true,
routeCfg: {
/**
* 目前支持正交路由 'orth' 和地铁路由 'er'
*/
// name: 'er',
/**
* 是否开启自动避障，默认为 false
* Whether to enable automatic obstacle avoidance, default is false
*/
enableObstacleAvoidance: true,
},
/**
* 拐弯处的圆角弧度，默认为直角，值为 0
* The radius of the corner rounding, defaults to a right angle
*/
// radius: 20,
/**
* 拐弯处距离节点最小距离, 默认为 2
* Minimum distance from the node at the corner, default is 5.
*/
// offset: 0,
/**
* 控制点数组，不指定时根据 A* 算法自动生成折线。若指定了，则按照 controlPoints 指定的位置进行弯折
* An array of control points that, when not specified, automatically generates the bends according to the A* algorithm. If specified, bends are made at the position specified by controlPoints.
*/
// controlPoints: [],
},
},
},
{
id: '130-180',
source: '130',
target: '180',
data: {
type: 'polyline-edge',
},
},
{
id: '140-150',
source: '140',
target: '150',
data: {
type: 'polyline-edge',
},
},
{
id: '140-110',
source: '140',
target: '110',
data: {
type: 'polyline-edge',
},
},
{
id: '120-150',
@@ -359,64 +246,48 @@ const 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,
},
labelShape: {
text: 'asdf-arrow',
},
},
},
{
id: '160-110',
source: '160',
target: '110',
data: {},
},
{
id: '150-190',
source: '150',
target: '190',
data: {},
},
{
id: 'upf-ims',
source: 'combo-upf',
target: 'combo-ims',
data: { type: 'cubic-edge' },
},
{
id: 'ems-5gc',
source: 'combo-ems',
target: 'combo-5gc',
data: { type: 'cubic-edge' },
},
{
id: 'ems-upf',
source: 'combo-ems',
target: 'combo-upf',
data: { type: 'cubic-edge' },
},
{
id: 'ems-ims',
source: 'combo-ems',
target: 'combo-ims',
data: { type: 'cubic-edge' },
},
],
combos: [
@@ -454,270 +325,49 @@ function initChart() {
if (!graphG6Dom.value) return;
console.log(graphG6Dom.value.offsetWidth, graphG6Dom.value.offsetHeight);
console.log(graphG6Dom.value.clientWidth, graphG6Dom.value.clientHeight);
console.log(graphG6Dom.value.scrollWidth, graphG6Dom.value.scrollHeight);
const graph = new Graph({
graphChart = new Graph({
container: graphG6Dom.value,
height: graphG6Dom.value.clientHeight,
width: graphG6Dom.value.clientWidth,
// autoFit: 'center',
fitCenter: true,
modes: {
default: [
// {
// type: 'drag-node',
// enableTransient: false,
// updateComboStructure: false,
// },
// {
// type: 'click-select',
// itemTypes: ['node', 'edge', 'combo'],
// },
// {
// type: 'drag-combo',
// enableTransient: true,
// updateComboStructure: true,
// },
'drag-combo',
'drag-canvas',
'click-select',
// 'zoom-canvas',
] as any,
default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
},
// 布局 力向吸引
layout: {
type: 'force',
animated: true,
linkDistance: 280,
maxSpeed: 100,
clustering: true,
nodeClusterBy: 'parentId',
clusterNodeStrength: 80,
// 全局节点 矩形
defaultNode: {
type: 'rect',
size: [80, 40],
style: {
fill: '#fff',
lineWidth: 1,
radius: 8,
},
labelCfg: {},
},
// 全局边 三次贝塞尔曲线
defaultEdge: {
type: 'polyline',
style: {
offset: 20, // 拐弯处距离节点最小距离
radius: 4, // 拐弯处的圆角弧度，若不设置则为直角
lineWidth: 1,
stroke: '#87e8de',
},
},
// 全局框节点 矩形
defaultCombo: {
type: 'rect', // Combo 类型
size: [40, 40],
// ... 其他配置
style: {
lineWidth: 1,
},
},
// // 主题
// theme: {
// type: 'spec',
// base: 'light',
// specification: {
// node: {
// dataTypeField: 'parentId',
// },
// },
// } as any,
// // 插件
// plugins: [
// {
// // 避免文本过于密集导致的视觉混乱
// type: 'lod-controller',
// disableLod: true,
// },
// ] as any,
// // 全局节点 矩形
// node: model => {
// const { id, data } = model;
// return {
// id,
// data: {
// type: 'rect-node',
// keyShape: {
// width: 80,
// height: 40,
// radius: 8,
// },
// labelShape: {
// position: 'center',
// text: `${id} - ${data.label}`,
// fill: '#fff',
// },
// 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,
// },
// ],
// },
// ...data,
// },
// };
// },
// // 全局边 三次贝塞尔曲线
// edge: model => {
// const { id, source, target, data } = model;
// return {
// id,
// source,
// target,
// data: {
// type: 'polyline-edge',
// animates: {
// update: [
// {
// fields: ['lineDash'],
// shapeId: 'keyShape',
// states: ['growing', 'running'],
// iterations: Infinity,
// duration: 2000,
// },
// {
// fields: ['offsetDistance'],
// shapeId: 'buShape',
// states: ['circleRunning'],
// iterations: Infinity,
// duration: 2000,
// },
// ],
// },
// ...data,
// },
// };
// },
// // 全局框节点 矩形
// combo: model => {
// const { id, data } = model;
// return {
// id,
// data: {
// type: 'rect-combo',
// keyShape: {
// opacity: 0.8,
// padding: [20, 20, 20, 20],
// radius: 8,
// },
// labelShape: {
// text: data.label,
// offsetY: 8,
// },
// labelBackgroundShape: {},
// buildIn: [
// {
// fields: ['opacity'],
// duration: 500,
// delay: 500 + Math.random() * 500,
// },
// ],
// buildOut: [
// {
// fields: ['opacity'],
// duration: 200,
// },
// ],
// animates: {
// update: [
// {
// fields: ['width', 'height', 'x', 'y'],
// shapeId: 'keyShape',
// },
// ],
// },
// ...data,
// },
// };
// },
// 节点状态
// nodeState: {
// breathing: {
// haloShape: {
// opacity: 0.25,
// lineWidth: 20,
// visible: true,
// },
// keyShape: {
// radius: 4,
// },
// },
// scaling: {
// keyShape: {
// width: 100,
// height: 60,
// },
// },
// } as any,
// edgeState: {
// growing: {
// keyShape: {
// lineWidth: 2,
// lineDash: ['100%', 0],
// },
// },
// running: {
// keyShape: {
// lineWidth: 2,
// lineDash: [2, 2],
// // TODO: lineDashOffset
// },
// },
// },
// data, //: graphData,
});
// graph.render()
// graphChart = graph;
}
const actions = {
'Enable/Disable Node States': {
Breathing: () => {
graphChart.getAllNodesData().forEach((node: any) => {
if (graphChart.getItemState(node.id, 'breathing')) {
graphChart.setItemState(node.id, 'breathing', false);
} else {
graphChart.setItemState(node.id, 'scaling', false);
graphChart.setItemState(node.id, 'breathing', true);
}
});
},
Scaling: () => {
graphChart.getAllNodesData().forEach((node: any) => {
if (graphChart.getItemState(node.id, 'scaling')) {
graphChart.setItemState(node.id, 'scaling', false);
} else {
graphChart.setItemState(node.id, 'breathing', false);
graphChart.setItemState(node.id, 'scaling', true);
}
});
},
},
'Enable/Disable Edge States': {
Growing: () => {
graphChart.getAllEdgesData().forEach((edge: any) => {
if (graphChart.getItemState(edge.id, 'growing')) {
graphChart.setItemState(edge.id, 'growing', false);
} else {
graphChart.setItemState(edge.id, 'running', false);
graphChart.setItemState(edge.id, 'growing', true);
}
});
},
Running: () => {
graphChart.getAllEdgesData().forEach((edge: any) => {
if (graphChart.getItemState(edge.id, 'running')) {
graphChart.setItemState(edge.id, 'running', false);
} else {
graphChart.setItemState(edge.id, 'growing', false);
graphChart.setItemState(edge.id, 'running', true);
}
});
},
},
};
graphChart.data(data); // 加载数据
graphChart.render(); // 渲染
}
/**查询全部网元数据列表 */
function fnGetList() {}
@@ -863,19 +513,7 @@ onMounted(() => {
</template>
<div ref="graphG6Dom" class="chart"></div>
<button @click="actions['Enable/Disable Node States'].Breathing()">
Breathing()
</button>
<button @click="actions['Enable/Disable Node States'].Scaling()">
Scaling()
</button>
<button @click="actions['Enable/Disable Edge States'].Growing()">
Growing()
</button>
<button @click="actions['Enable/Disable Edge States'].Running()">
Running()
</button>
<!-- 组件 -->
<div class="charts">
<ChartGraphG6></ChartGraphG6>