feat: 拓扑图接入数据显示状态
This commit is contained in:
TsMask
29
src/api/ne/ne.ts
Normal file
29
src/api/ne/ne.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { request } from '@/plugins/http-fetch';
|
||||
|
||||
/**
|
||||
* 查询网元列表
|
||||
* @param query 查询参数
|
||||
* @returns object
|
||||
*/
|
||||
export function listNe(query: Record<string, any>) {
|
||||
return request({
|
||||
url: '/ne/list',
|
||||
method: 'get',
|
||||
params: query,
|
||||
timeout: 60_000,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询网元状态
|
||||
* @param neType 网元类型
|
||||
* @param neId 网元ID
|
||||
* @returns object
|
||||
*/
|
||||
export function stateNe(neType: string, neId: string) {
|
||||
return request({
|
||||
url: '/ne/state',
|
||||
method: 'get',
|
||||
params: { neType, neId },
|
||||
});
|
||||
}
|
||||
1730
src/views/monitor/topology/graph.ts
Normal file
1730
src/views/monitor/topology/graph.ts
Normal file
File diff suppressed because it is too large
Load Diff
@@ -3,445 +3,161 @@ 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 { Graph, GraphData } from '@antv/g6';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { listNe, stateNe } from '@/api/ne/ne';
|
||||
import message from 'ant-design-vue/lib/message';
|
||||
const neInfoStore = useNeInfoStore();
|
||||
import { randerGroph } from './graph';
|
||||
import { parseDateToStr } from '@/utils/date-utils';
|
||||
const { t } = useI18n();
|
||||
|
||||
/**图DOM节点实例对象 */
|
||||
const graphG6Dom = ref<HTMLElement | undefined>(undefined);
|
||||
|
||||
/**图实例对象 */
|
||||
let graphChart: any = null;
|
||||
const graphG6 = ref<any>(null);
|
||||
|
||||
/**图DOM节点实例对象 */
|
||||
const graphData = reactive<GraphData>({
|
||||
/**图数据 */
|
||||
const graphG6Data = reactive<Record<string, any>>({
|
||||
nodes: [],
|
||||
edges: [],
|
||||
combos: [],
|
||||
});
|
||||
|
||||
const data = {
|
||||
nodes: [
|
||||
// 0 基站
|
||||
{
|
||||
id: '0',
|
||||
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',
|
||||
x: 450,
|
||||
y: 450,
|
||||
label: 'DM',
|
||||
labelCfg: {
|
||||
position: 'center',
|
||||
},
|
||||
style: {
|
||||
fill: '#00b050',
|
||||
stroke: '#00b050',
|
||||
lineWidth: 1,
|
||||
},
|
||||
},
|
||||
// 2 O&M
|
||||
{
|
||||
id: '2',
|
||||
x: 50,
|
||||
y: 450,
|
||||
label: 'O&M',
|
||||
},
|
||||
// 100 EMS
|
||||
{
|
||||
id: '100',
|
||||
label: 'EMS',
|
||||
comboId: 'combo-ems',
|
||||
x: 300,
|
||||
y: 450,
|
||||
},
|
||||
// 190 UPF
|
||||
{
|
||||
id: '190',
|
||||
comboId: 'combo-upf',
|
||||
x: 300,
|
||||
y: 350,
|
||||
label: 'UPF',
|
||||
labelCfg: {
|
||||
position: 'center',
|
||||
},
|
||||
style: {
|
||||
fill: '#d580ff',
|
||||
stroke: '#d580ff',
|
||||
lineWidth: 1,
|
||||
},
|
||||
},
|
||||
// EP-IMS
|
||||
{
|
||||
id: '110',
|
||||
comboId: 'combo-ims',
|
||||
x: 600,
|
||||
y: 350,
|
||||
label: 'IMS',
|
||||
labelCfg: {
|
||||
position: 'center',
|
||||
},
|
||||
style: {
|
||||
fill: '#ed7d31',
|
||||
stroke: '#ed7d31',
|
||||
lineWidth: 1,
|
||||
},
|
||||
},
|
||||
// 5GC控制面
|
||||
{
|
||||
id: '170',
|
||||
label: 'NSSF',
|
||||
comboId: 'combo-5gc',
|
||||
x: 300,
|
||||
y: 50,
|
||||
},
|
||||
{
|
||||
id: '130',
|
||||
label: 'AUSF',
|
||||
comboId: 'combo-5gc',
|
||||
x: 450,
|
||||
y: 50,
|
||||
},
|
||||
{
|
||||
id: '140',
|
||||
label: 'UDM',
|
||||
comboId: 'combo-5gc',
|
||||
x: 600,
|
||||
y: 50,
|
||||
},
|
||||
{
|
||||
id: '120',
|
||||
label: 'AMF',
|
||||
comboId: 'combo-5gc',
|
||||
x: 300,
|
||||
y: 150,
|
||||
},
|
||||
{
|
||||
id: '180',
|
||||
label: 'NRF',
|
||||
comboId: 'combo-5gc',
|
||||
x: 450,
|
||||
y: 150,
|
||||
},
|
||||
{
|
||||
id: '150',
|
||||
label: 'SMF',
|
||||
comboId: 'combo-5gc',
|
||||
x: 300,
|
||||
y: 250,
|
||||
},
|
||||
{
|
||||
id: '160',
|
||||
label: 'PCF',
|
||||
comboId: 'combo-5gc',
|
||||
x: 700,
|
||||
y: 250,
|
||||
},
|
||||
],
|
||||
edges: [
|
||||
{
|
||||
id: '0-5gc',
|
||||
source: '0',
|
||||
target: 'combo-5gc',
|
||||
},
|
||||
{
|
||||
id: '0-upf',
|
||||
source: '0',
|
||||
target: 'combo-upf',
|
||||
},
|
||||
{
|
||||
id: 'upf-1',
|
||||
source: 'combo-upf',
|
||||
target: '1',
|
||||
},
|
||||
|
||||
{
|
||||
id: 'ems-2',
|
||||
source: 'combo-ems',
|
||||
target: '2',
|
||||
},
|
||||
{
|
||||
id: '170-120',
|
||||
source: '170',
|
||||
target: '120',
|
||||
},
|
||||
{
|
||||
id: '130-120',
|
||||
source: '130',
|
||||
target: '120',
|
||||
},
|
||||
{
|
||||
id: '140-120',
|
||||
source: '140',
|
||||
target: '120',
|
||||
},
|
||||
{
|
||||
id: '140-180',
|
||||
source: '140',
|
||||
target: '180',
|
||||
},
|
||||
{
|
||||
id: '120-180',
|
||||
source: '120',
|
||||
target: '180',
|
||||
},
|
||||
{
|
||||
id: '130-180',
|
||||
source: '130',
|
||||
target: '180',
|
||||
},
|
||||
{
|
||||
id: '140-150',
|
||||
source: '140',
|
||||
target: '150',
|
||||
},
|
||||
{
|
||||
id: '140-110',
|
||||
source: '140',
|
||||
target: '110',
|
||||
},
|
||||
{
|
||||
id: '120-150',
|
||||
source: '120',
|
||||
target: '150',
|
||||
data: {},
|
||||
},
|
||||
{
|
||||
id: '150-180',
|
||||
source: '150',
|
||||
target: '180',
|
||||
data: {},
|
||||
},
|
||||
{
|
||||
id: '150-160',
|
||||
source: '150',
|
||||
target: '160',
|
||||
},
|
||||
{
|
||||
id: '160-120',
|
||||
source: '160',
|
||||
target: '120',
|
||||
},
|
||||
{
|
||||
id: '160-180',
|
||||
source: '160',
|
||||
target: '180',
|
||||
},
|
||||
{
|
||||
id: '160-110',
|
||||
source: '160',
|
||||
target: '110',
|
||||
},
|
||||
|
||||
{
|
||||
id: '150-190',
|
||||
source: '150',
|
||||
target: '190',
|
||||
},
|
||||
|
||||
{
|
||||
id: 'upf-ims',
|
||||
source: 'combo-upf',
|
||||
target: 'combo-ims',
|
||||
},
|
||||
{
|
||||
id: 'ems-5gc',
|
||||
source: 'combo-ems',
|
||||
target: 'combo-5gc',
|
||||
},
|
||||
{
|
||||
id: 'ems-upf',
|
||||
source: 'combo-ems',
|
||||
target: 'combo-upf',
|
||||
},
|
||||
{
|
||||
id: 'ems-ims',
|
||||
source: 'combo-ems',
|
||||
target: 'combo-ims',
|
||||
},
|
||||
],
|
||||
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() {
|
||||
/**查询全部网元数据列表 */
|
||||
function fnRanderData() {
|
||||
if (!graphG6Dom.value) return;
|
||||
console.log(graphG6Dom.value.offsetWidth, graphG6Dom.value.offsetHeight);
|
||||
console.log(graphG6Dom.value.clientWidth, graphG6Dom.value.clientHeight);
|
||||
graphChart = new Graph({
|
||||
container: graphG6Dom.value,
|
||||
height: graphG6Dom.value.clientHeight,
|
||||
width: graphG6Dom.value.clientWidth,
|
||||
fitCenter: true,
|
||||
modes: {
|
||||
default: ['drag-canvas', 'zoom-canvas', 'drag-node'], // 允许拖拽画布、放缩画布、拖拽节点
|
||||
},
|
||||
// 全局节点 矩形
|
||||
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,
|
||||
},
|
||||
},
|
||||
});
|
||||
graphG6.value = randerGroph(graphG6Dom.value, graphG6Data);
|
||||
}
|
||||
|
||||
graphChart.data(data); // 加载数据
|
||||
graphChart.render(); // 渲染
|
||||
/**查询网元状态 */
|
||||
async function fnGetState() {
|
||||
for (const node of graphG6Data.nodes) {
|
||||
const ne = node.info;
|
||||
if (ne.neType === 'OMC') continue;
|
||||
const result = await stateNe(ne.neType, ne.neId);
|
||||
if (result.code === RESULT_CODE_SUCCESS) {
|
||||
ne.serverState = result.data;
|
||||
ne.serverState.refreshTime = parseDateToStr(
|
||||
ne.serverState.refreshTime,
|
||||
'HH:mm:ss'
|
||||
);
|
||||
const node = graphG6.value.findById(ne.neName);
|
||||
console.log('查询网元状态', node);
|
||||
graphG6.value.setItemState(node, 'neState', true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**查询全部网元数据列表 */
|
||||
function fnGetList() {}
|
||||
function fnGetList(refresh: boolean = false) {
|
||||
listNe({
|
||||
bandStatus: false,
|
||||
})
|
||||
.then(res => {
|
||||
if (
|
||||
res.code === RESULT_CODE_SUCCESS &&
|
||||
Array.isArray(res.data) &&
|
||||
res.data.length > 0
|
||||
) {
|
||||
let rootNode = 'OMC';
|
||||
const nodes = [];
|
||||
const edges = [];
|
||||
for (const item of res.data) {
|
||||
item.serverState = {};
|
||||
const nodeIndex = nodes.findIndex(v => v.id === item.neName);
|
||||
if (nodeIndex === -1) {
|
||||
// 根网管
|
||||
if (item.neType === 'OMC') {
|
||||
rootNode = item.neName;
|
||||
item.serverState = {
|
||||
neId: item.neId,
|
||||
neName: item.neName,
|
||||
neType: item.neType,
|
||||
expire: '2024-03-31',
|
||||
refreshTime: '10:31:47',
|
||||
sn: '13770707',
|
||||
version: '2.2312.8',
|
||||
};
|
||||
nodes.push({
|
||||
id: item.neName,
|
||||
label: item.neName,
|
||||
info: item,
|
||||
labelCfg: {
|
||||
position: 'bottom',
|
||||
offset: 8,
|
||||
style: {
|
||||
fill: '#fff',
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
size: 60,
|
||||
icon: {
|
||||
x: -30,
|
||||
y: -30,
|
||||
// 可更换为其他图片地址
|
||||
img: '/svg/service_db.svg',
|
||||
width: 60,
|
||||
height: 60,
|
||||
},
|
||||
});
|
||||
} else {
|
||||
nodes.push({
|
||||
id: item.neName,
|
||||
label: item.neName,
|
||||
info: item,
|
||||
size: 48,
|
||||
icon: {
|
||||
x: -24,
|
||||
y: -24,
|
||||
img: '/svg/service.svg',
|
||||
width: 48,
|
||||
height: 48,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (item.neType !== 'OMC') {
|
||||
const edgeIndex = edges.findIndex(v => v.source === item.neName);
|
||||
if (edgeIndex === -1) {
|
||||
edges.push({
|
||||
source: item.neName,
|
||||
target: rootNode,
|
||||
label: `${item.neType}-${rootNode}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
graphG6Data.nodes = nodes;
|
||||
graphG6Data.edges = edges;
|
||||
console.log(graphG6Data);
|
||||
return true;
|
||||
} else {
|
||||
message.warning({
|
||||
content: t('common.noData'),
|
||||
duration: 2,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
})
|
||||
.then(hasNeList => {
|
||||
if (!hasNeList) return;
|
||||
if (refresh) {
|
||||
// graphG6.value.get('canvas').set('localRefresh', true);
|
||||
graphG6.value.destroy();
|
||||
// graphG6.value.clear();
|
||||
}
|
||||
fnRanderData();
|
||||
fnGetState();
|
||||
});
|
||||
}
|
||||
|
||||
function fnAdd() {
|
||||
fnGetList(true);
|
||||
}
|
||||
|
||||
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) {
|
||||
// 圈
|
||||
const comboId = `combo-${item.value}`;
|
||||
graphData.combos?.push({
|
||||
id: comboId,
|
||||
data: {
|
||||
label: item.label,
|
||||
keyShape: {
|
||||
opacity: 0.8,
|
||||
padding: [20, 20, 20, 20],
|
||||
radius: 4,
|
||||
lineWidth: 1,
|
||||
stroke: '#d580ff',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
for (const itemChild of item.children) {
|
||||
// 点
|
||||
const nodeId = `node-${itemChild.label}`;
|
||||
graphData.nodes?.push({
|
||||
id: nodeId,
|
||||
data: {
|
||||
label: itemChild.label,
|
||||
parentId: comboId,
|
||||
keyShape: {
|
||||
width: 80,
|
||||
height: 40,
|
||||
radius: 8,
|
||||
fill: '#00b050',
|
||||
},
|
||||
labelShape: {
|
||||
position: 'center',
|
||||
text: itemChild.label,
|
||||
fill: '#fff', // 节点标签文字颜色
|
||||
},
|
||||
},
|
||||
});
|
||||
// 边
|
||||
// const edgeId = `edge-${itemChild.label}`;
|
||||
// graphData.edges?.push({
|
||||
// id: edgeId,
|
||||
// source: '0',
|
||||
// target: 'combo-5gc',
|
||||
// data: {},
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
||||
fnGetList();
|
||||
initChart();
|
||||
} else {
|
||||
message.warning({
|
||||
content: t('common.noData'),
|
||||
duration: 2,
|
||||
});
|
||||
}
|
||||
});
|
||||
// 获取网元列表
|
||||
fnGetList();
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -455,7 +171,7 @@ onMounted(() => {
|
||||
<!-- 插槽-卡片左侧侧 -->
|
||||
<template #title>
|
||||
<div class="button-container" style="margin-bottom: -12px">
|
||||
<a-button type="primary">
|
||||
<a-button type="primary" @click.prevent="fnAdd">
|
||||
<template #icon>
|
||||
<PlusOutlined />
|
||||
</template>
|
||||
@@ -514,6 +230,86 @@ onMounted(() => {
|
||||
|
||||
<div ref="graphG6Dom" class="chart"></div>
|
||||
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 200px;
|
||||
background: #e6f7ff;
|
||||
"
|
||||
>
|
||||
<div><span>状态：</span><span>正常</span></div>
|
||||
<div><span>刷新时间：</span><span>18:37:22</span></div>
|
||||
<div><span>ID：</span><span>neID</span></div>
|
||||
<div><span>名称：</span><span>neName</span></div>
|
||||
<div><span>版本：</span><span>2.2312.8</span></div>
|
||||
<div><span>SN：</span><span>13770707</span></div>
|
||||
<div><span>有效期：</span><span>2024-03-31</span></div>
|
||||
</div>
|
||||
===
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 140px;
|
||||
background: #e6f7ff;
|
||||
"
|
||||
>
|
||||
<div id="show" style="cursor: pointer; margin-bottom: 2px">
|
||||
1. 显示所有隐藏项
|
||||
</div>
|
||||
<div id="collapseAll" style="cursor: pointer; margin-bottom: 2px">
|
||||
2. 折叠所有集群
|
||||
</div>
|
||||
</div>
|
||||
===
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
background: #e6f7ff;
|
||||
"
|
||||
>
|
||||
<div id="expand" style="cursor: pointer; margin-bottom: 2px">
|
||||
1. 展开集群
|
||||
</div>
|
||||
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
|
||||
2. 隐藏节点
|
||||
</div>
|
||||
</div>
|
||||
===
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 160px;
|
||||
background: #e6f7ff;
|
||||
"
|
||||
>
|
||||
<div id="collapse" style="cursor: pointer; margin-bottom: 2px">
|
||||
1. 折叠集群
|
||||
</div>
|
||||
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
|
||||
2. 隐藏节点
|
||||
</div>
|
||||
<div id="restart" style="cursor: pointer; margin-bottom: 2px">
|
||||
3. 重启
|
||||
</div>
|
||||
</div>
|
||||
===
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
background: #e6f7ff;
|
||||
"
|
||||
>
|
||||
<div id="hide" style="cursor: pointer; margin-bottom: 2px">
|
||||
1. 隐藏边
|
||||
</div>
|
||||
</div>
|
||||
<!-- 组件 -->
|
||||
<div class="charts">
|
||||
<ChartGraphG6></ChartGraphG6>
|
||||
@@ -526,7 +322,7 @@ onMounted(() => {
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: calc(100vh - 300px);
|
||||
background-color: rgb(255, 237, 237);
|
||||
background-color: rgb(43, 47, 51);
|
||||
}
|
||||
.charts {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user