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

feat: 拓扑图Dome

Browse Source
This commit is contained in:
TsMask
2023-12-15 14:24:04 +08:00
parent 5124c0c04a
commit f67d083e10
3 changed files with 1075 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
package.json
View File

@@ -13,13 +13,12 @@
},
"dependencies": {
"@ant-design/icons-vue": "^7.0.1",
"@antv/g6": "^5.0.0-beta.27",
"@antv/g6": "^5.0.0-beta.28",
"@codemirror/lang-javascript": "^6.2.1",
"@codemirror/merge": "^6.1.2",
"@codemirror/merge": "^6.4.0",
"@codemirror/theme-one-dark": "^6.1.2",
"@tato30/vue-pdf": "^1.8.1",
"@vueuse/components": "^10.6.1",
"@vueuse/core": "^10.6.1",
"@vueuse/core": "^10.7.0",
"ant-design-vue": "^3.2.20",
"antdv-pro-layout": "^3.2.6",
"codemirror": "^6.0.1",
@@ -30,7 +29,7 @@
"js-cookie": "^3.0.5",
"nprogress": "^0.2.0",
"pinia": "^2.1.7",
"vue": "^3.3.10",
"vue": "^3.3.11",
"vue-codemirror": "^6.1.1",
"vue-i18n": "^9.8.0",
"vue-router": "^4.2.5",
@@ -41,12 +40,12 @@
"@types/file-saver": "^2.0.7",
"@types/js-cookie": "^3.0.6",
"@types/node": "^18.0.0",
"@types/nprogress": "^0.2.0",
"@vitejs/plugin-vue": "^4.5.1",
"@types/nprogress": "^0.2.3",
"@vitejs/plugin-vue": "^4.5.2",
"less": "^4.2.0",
"typescript": "^5.2.2",
"typescript": "^5.3.3",
"unplugin-vue-components": "^0.26.0",
"vite": "^5.0.5",
"vite": "^5.0.9",
"vite-plugin-compression": "^0.5.1",
"vue-tsc": "^1.8.25"
}

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

@@ -1,6 +1,6 @@
<template>
<div>
<div ref="g6Dom" :style="{ height: height, width: width }"></div>
<div ref="chartGraphG6Dom" :style="{ height: height, width: width }"></div>
<button @click="actions['Enable/Disable Node States'].Breathing()">
Breathing()
</button>
@@ -43,7 +43,7 @@ const props = defineProps({
},
});
const g6Dom = ref<HTMLElement | undefined>(undefined);
const chartGraphG6Dom = ref<HTMLElement | undefined>(undefined);
const ExtGraph = extend(Graph, {
layouts: {},
@@ -60,7 +60,7 @@ const data = {
{
id: '0',
data: {
x: 80,
x: 50,
y: 150,
type: 'circle-node',
color: '#fffff',
@@ -91,8 +91,19 @@ const data = {
id: '1',
data: {
label: 'DM',
x: 600,
y: 350,
x: 450,
y: 450,
keyShape: {
width: 80,
height: 40,
radius: 8,
fill: '#00b050',
},
labelShape: {
position: 'center',
text: 'DM',
fill: '#fff', // 节点标签文字颜色
},
},
},
// 2 O&M
@@ -100,8 +111,58 @@ const data = {
id: '2',
data: {
label: 'O&M',
x: 900,
y: 100,
x: 50,
y: 450,
},
},
// 100 EMS
{
id: '100',
data: {
label: 'EMS',
parentId: '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', // 节点标签文字颜色
},
},
},
// 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', // 节点标签文字颜色
},
},
},
// 5GC控制面
@@ -119,7 +180,7 @@ const data = {
data: {
label: 'AUSF',
parentId: 'combo-5gc',
x: 400,
x: 450,
y: 50,
},
},
@@ -128,7 +189,7 @@ const data = {
data: {
label: 'UDM',
parentId: 'combo-5gc',
x: 500,
x: 600,
y: 50,
},
},
@@ -146,7 +207,7 @@ const data = {
data: {
label: 'NRF',
parentId: 'combo-5gc',
x: 400,
x: 450,
y: 150,
},
},
@@ -155,7 +216,7 @@ const data = {
data: {
label: 'SMF',
parentId: 'combo-5gc',
x: 500,
x: 300,
y: 250,
},
},
@@ -164,93 +225,67 @@ const data = {
data: {
label: 'PCF',
parentId: 'combo-5gc',
x: 600,
x: 700,
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: '0-5gc',
source: '0',
target: 'combo-5gc',
data: {},
},
{
id: '0-upf',
source: '0',
target: 'combo-upf',
data: {
type: 'cubic-edge',
animates: {
update: [
{
// 在 selected 和 active 状态变化导致的 haloShape opacity 变化时，使 opacity 带动画地更新
fields: ['opacity'],
shapeId: 'haloShape',
states: ['selected', 'active'],
duration: 500,
},
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: '5gc-ems',
source: 'combo-5gc',
target: 'combo-ems',
data: {},
},
{
id: 'upf-ems',
id: 'upf-1',
source: 'combo-upf',
target: 'combo-ems',
data: {},
},
{
id: 'ims-ems',
source: 'combo-ims',
target: 'combo-ems',
data: {},
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: {},
data: { type: 'cubic-edge' },
},
{
id: '170-120',
@@ -375,34 +410,42 @@ const data = {
},
},
{
id: '160-111',
id: '160-110',
source: '160',
target: '111',
data: {},
},
{
id: '0-upf',
source: '0',
target: 'combo-upf',
target: '110',
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: {},
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: [
@@ -415,50 +458,57 @@ const data = {
{
id: 'combo-upf',
data: {
label: '5GC用户面',
keyShape: {
opacity: 0.8,
padding: [20, 20, 20, 20],
radius: 4,
lineWidth: 1,
stroke: '#d580ff',
},
},
},
{
id: 'combo-ims',
data: {
label: 'EP-IMS用户面',
},
data: {},
},
{
id: 'combo-ems',
data: {
label: 'EMS',
},
data: {},
},
],
};
let graph: any = null;
/**初始化渲染图表 */
function initChart() {
if (!g6Dom.value) return;
if (!chartGraphG6Dom.value) return;
console.log(chartGraphG6Dom.value.offsetWidth);
console.log(chartGraphG6Dom.value.clientWidth);
console.log(chartGraphG6Dom.value.scrollWidth);
graph = new ExtGraph({
container: g6Dom.value,
container: chartGraphG6Dom.value,
height: 500,
width: chartGraphG6Dom.value.clientWidth,
// autoFit: 'center',
modes: {
default: [
{
type: 'drag-node',
enableTransient: false,
updateComboStructure: false,
},
{
type: 'click-select',
itemTypes: ['node', 'edge', 'combo'],
},
{
type: 'drag-combo',
enableTransient: true,
updateComboStructure: true,
},
// {
// 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',
'click-select',
// 'zoom-canvas',
] as any,
},
// 布局 力向吸引
@@ -503,7 +553,8 @@ function initChart() {
},
labelShape: {
position: 'center',
text: data.label,
text: `${id} - ${data.label}`,
fill: '#fff',
},
animates: {
update: [
@@ -545,7 +596,7 @@ function initChart() {
source,
target,
data: {
type: 'cubic-edge',
type: 'polyline-edge',
animates: {
update: [
{

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

@@ -1,68 +1,924 @@
<script setup lang="ts">
import { reactive, onMounted } from 'vue';
import { reactive, onMounted, ref } from 'vue';
import { PageContainer } from 'antdv-pro-layout';
import ChartGraphG6 from '@/components/ChartGraphG6/index.vue';
import useI18n from '@/hooks/useI18n';
import useNeInfoStore from '@/store/modules/neinfo';
import { Extensions, Graph, GraphData, extend } from '@antv/g6';
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
import message from 'ant-design-vue/lib/message';
const neInfoStore = useNeInfoStore();
const { t } = useI18n();
/**图DOM节点实例对象 */
const graphG6Dom = ref<HTMLElement | undefined>(undefined);
/**图实例对象 */
let graphChart: any = null;
/**图拓展 */
const ExtGraph = extend(Graph, {
layouts: {},
edges: {
'polyline-edge': Extensions.PolylineEdge,
'cubic-edge': Extensions.CubicEdge,
},
});
/**图DOM节点实例对象 */
const graphData = reactive<GraphData>({
nodes: [],
edges: [],
combos: [],
});
const data = {
nodes: [
// 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,
},
},
},
// 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', // 节点标签文字颜色
},
},
},
// 2 O&M
{
id: '2',
data: {
label: 'O&M',
x: 50,
y: 450,
},
},
// 100 EMS
{
id: '100',
data: {
label: 'EMS',
parentId: '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', // 节点标签文字颜色
},
},
},
// 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', // 节点标签文字颜色
},
},
},
// 5GC控制面
{
id: '170',
data: {
label: 'NSSF',
parentId: 'combo-5gc',
x: 300,
y: 50,
},
},
{
id: '130',
data: {
label: 'AUSF',
parentId: 'combo-5gc',
x: 450,
y: 50,
},
},
{
id: '140',
data: {
label: 'UDM',
parentId: 'combo-5gc',
x: 600,
y: 50,
},
},
{
id: '120',
data: {
label: 'AMF',
parentId: 'combo-5gc',
x: 300,
y: 150,
},
},
{
id: '180',
data: {
label: 'NRF',
parentId: 'combo-5gc',
x: 450,
y: 150,
},
},
{
id: '150',
data: {
label: 'SMF',
parentId: 'combo-5gc',
x: 300,
y: 250,
},
},
{
id: '160',
data: {
label: 'PCF',
parentId: 'combo-5gc',
x: 700,
y: 250,
},
},
],
edges: [
{
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',
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,
},
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: [
{
id: 'combo-5gc',
data: {
text: '5GC控制面',
},
},
{
id: 'combo-upf',
data: {
keyShape: {
opacity: 0.8,
padding: [20, 20, 20, 20],
radius: 4,
lineWidth: 1,
stroke: '#d580ff',
},
},
},
{
id: 'combo-ims',
data: {},
},
{
id: 'combo-ems',
data: {},
},
],
};
/**初始化渲染图表 */
function initChart() {
if (!graphG6Dom.value) return;
console.log(graphG6Dom.value.offsetWidth);
console.log(graphG6Dom.value.clientWidth);
console.log(graphG6Dom.value.scrollWidth);
const graph = new ExtGraph({
container: graphG6Dom.value,
height: 500,
width: graphG6Dom.value.clientWidth,
// autoFit: 'center',
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,
},
// 布局 力向吸引
layout: {
type: 'force',
animated: true,
linkDistance: 280,
maxSpeed: 100,
clustering: true,
nodeClusterBy: 'parentId',
clusterNodeStrength: 80,
},
// 主题
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.on('node:click', (e: any) => {
const s = graphChart.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',
// },
// },
// });
});
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);
}
});
},
},
};
/**查询全部网元数据列表 */
function fnGetList() {}
onMounted(() => {});
onMounted(() => {
// 获取网元网元列表
neInfoStore.fnNelist().then(res => {
if (
res.code === RESULT_CODE_SUCCESS &&
Array.isArray(res.data) &&
res.data.length > 0
) {
console.log(res.data);
console.log(neInfoStore.neCascaderOptions);
const itemNode = neInfoStore.neCascaderOptions;
for (const item of itemNode) {
graphData.combos?.push({
id: item.value,
data: {
color: '#fff',
label: item.value,
},
});
}
fnGetList();
initChart();
} else {
message.warning({
content: t('common.noData'),
duration: 2,
});
}
});
});
</script>
<template>
<PageContainer>
<a-card
:bordered="false"
:body-style="{ marginBottom: '24px', paddingBottom: 0 }"
:body-style="{ marginBottom: '24px' }"
size="small"
>
<!-- 表格搜索栏 -->
<a-form name="queryParams" layout="horizontal">
<a-row :gutter="16">
<a-col :lg="10" :md="10" :xs="24">
<a-form-item
:label="t('views.monitor.monitor.filter')"
name="neTypeSelect"
>
ssdf
</a-form-item>
</a-col>
<a-col :lg="6" :md="12" :xs="24">
<a-form-item>
<a-space :size="8">
<a-button type="primary" @click.prevent="fnGetList()">
<template #icon><SearchOutlined /></template>
{{ t('common.search') }}
</a-button>
</a-space>
</a-form-item>
</a-col>
</a-row>
</a-form>
<!-- 插槽-卡片左侧侧 -->
<template #title>
<div class="button-container" style="margin-bottom: -12px">
<a-button type="primary">
<template #icon>
<PlusOutlined />
</template>
{{ t('common.addText') }}
</a-button>
<a-button type="primary" danger ghost>
<template #icon>
<DeleteOutlined />
</template>
{{ t('views.neUser.auth.batchDelText') }}
</a-button>
<a-popconfirm
:title="t('views.neUser.sub.loadDataConfirm')"
:ok-text="t('common.ok')"
:cancel-text="t('common.cancel')"
>
<a-button type="dashed" danger>
<template #icon>
<SyncOutlined />
</template>
{{ t('views.neUser.sub.loadData') }}
</a-button>
</a-popconfirm>
<a-button type="dashed">
<template #icon>
<ImportOutlined />
</template>
{{ t('views.neUser.sub.import') }}
</a-button>
<a-popconfirm
:title="t('views.neUser.sub.exportConfirm')"
ok-text="TXT"
ok-type="default"
>
<a-button type="dashed">
<template #icon>
<ExportOutlined />
</template>
{{ t('views.neUser.sub.export') }}
</a-button>
</a-popconfirm>
</div>
</template>
<!-- 插槽-卡片右侧 -->
<template #extra>
<a-tooltip>
<template #title>{{ t('common.reloadText') }}</template>
<a-button type="text" @click.prevent="fnGetList()">
<template #icon><ReloadOutlined /></template>
</a-button>
</a-tooltip>
</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>
</div>
</a-card>
<a-row :gutter="16">
<a-col :lg="24" :md="24" :xs="24">
<a-card :bordered="false" :body-style="{ marginBottom: '24px' }">
<!-- 插槽-卡片左侧侧 -->
<template #title>asdf</template>
<!-- 插槽-卡片右侧 -->
<template #extra> adf </template>
<div class="chart">
<ChartGraphG6 :option="{}"></ChartGraphG6>
</div>
</a-card>
</a-col>
</a-row>
</PageContainer>
</template>
<style lang="less" scoped>
.chart {
width: 100%;
height: calc(100vh - 300px);
background-color: rgb(255, 237, 237);
}
.charts {
width: 100%;
height: 500px;
background-color: rgb(238, 237, 237);
margin-top: 32px;
}
</style>