From fe82336937eebd774d7c333e4ff3a8d7c9ec8cbb Mon Sep 17 00:00:00 2001 From: TsMask <340112800@qq.com> Date: Fri, 3 Jan 2025 21:09:16 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9F=BA=E7=AB=99=E7=8A=B6=E6=80=81?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=8F=8A=E6=8B=93=E6=89=91=E5=B1=95=E7=A4=BA?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=8A=9F=E8=83=BD=E5=AE=9E=E7=8E=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/svg/base4G.svg | 28 + public/svg/base5G.svg | 28 + src/api/neData/amf.ts | 87 +++ .../topologyBuild/hooks/registerEdge.ts | 45 +- .../topologyBuild/hooks/registerNode.ts | 15 +- .../ne-data/base-station/components/list.vue | 593 ++++++++++++++++++ .../base-station/components/topology.vue | 557 ++++++++++++++++ src/views/ne-data/base-station/index.vue | 40 ++ 8 files changed, 1370 insertions(+), 23 deletions(-) create mode 100644 public/svg/base4G.svg create mode 100644 public/svg/base5G.svg create mode 100644 src/views/ne-data/base-station/components/list.vue create mode 100644 src/views/ne-data/base-station/components/topology.vue create mode 100644 src/views/ne-data/base-station/index.vue diff --git a/public/svg/base4G.svg b/public/svg/base4G.svg new file mode 100644 index 00000000..b8f0d2f3 --- /dev/null +++ b/public/svg/base4G.svg @@ -0,0 +1,28 @@ + + + + + background + + + + + + + Layer 1 + + + + + + + + + + + + + + 4G + + \ No newline at end of file diff --git a/public/svg/base5G.svg b/public/svg/base5G.svg new file mode 100644 index 00000000..9c37b576 --- /dev/null +++ b/public/svg/base5G.svg @@ -0,0 +1,28 @@ + + + + + background + + + + + + + Layer 1 + + + + + + + + + + + + + + 5G + + \ No newline at end of file diff --git a/src/api/neData/amf.ts b/src/api/neData/amf.ts index 6dce291c..fd5d57f4 100644 --- a/src/api/neData/amf.ts +++ b/src/api/neData/amf.ts @@ -41,3 +41,90 @@ export function exportAMFDataUE(data: Record) { timeout: 60_000, }); } + +/** + * AMF-接入基站信息列表 + * @param query 查询参数 neId=001&id=1 + * @returns object + */ +export function listAMFNblist(query: Record) { + return request({ + url: '/neData/amf/nb/list', + method: 'get', + params: query, + timeout: 60_000, + }); +} + +/** + * AMF-接入基站状态信息列表 + * @param query 查询参数 neId=001&state=1 + * @returns object + */ +export function listAMFNbStatelist(query: Record) { + return request({ + url: '/neData/amf/nb/list-cfg', + method: 'get', + params: query, + timeout: 60_000, + }); +} + +/** + * AMF-接入基站状态信息新增 + * @param neId 网元ID + * @param data 数据 { "index": 1, "name": "Gnb", "address": "192.168.8.1", "position": "Area-B" } + * @returns object + */ +export function addAMFNbState(neId: string, data: Record) { + return request({ + url: `/ne/config/data`, + method: 'post', + data: { + neType: 'AMF', + neId: neId, + paramName: 'gnbList', + paramData: data, + loc: `${data.index}`, + }, + }); +} + +/** + * AMF-接入基站状态信息修改 + * @param neId 网元ID + * @param data 数据 { "index": 1, "name": "Gnb", "address": "192.168.8.1", "position": "Area-B" } + * @returns object + */ +export function editAMFNbState(neId: string, data: Record) { + return request({ + url: `/ne/config/data`, + method: 'put', + data: { + neType: 'AMF', + neId: neId, + paramName: 'gnbList', + paramData: data, + loc: `${data.index}`, + }, + }); +} + +/** + * AMF-接入基站状态信息删除 + * @param neId 网元ID + * @param index 数据index + * @returns object + */ +export function delAMFNbState(neId: string, index: string | number) { + return request({ + url: `/ne/config/data`, + method: 'delete', + params: { + neType: 'AMF', + neId: neId, + paramName: 'gnbList', + loc: `${index}`, + }, + }); +} diff --git a/src/views/monitor/topologyBuild/hooks/registerEdge.ts b/src/views/monitor/topologyBuild/hooks/registerEdge.ts index 8b9d1eb2..3f306b9c 100644 --- a/src/views/monitor/topologyBuild/hooks/registerEdge.ts +++ b/src/views/monitor/topologyBuild/hooks/registerEdge.ts @@ -130,26 +130,17 @@ export function edgeLineAnimateState() { // circle-move 圆点沿边运动 if (name === 'circle-move') { - let back1 = group.find( - (ele: any) => ele.get('name') === 'circle-stroke1' + const backArr = group.findAll((ele: any) => + ele.get('name').startsWith('circle-stroke') ); - if (back1) { - back1.remove(); - back1.destroy(); - } - let back2 = group.find( - (ele: any) => ele.get('name') === 'circle-stroke2' - ); - if (back2) { - back2.remove(); - back2.destroy(); - } if (value) { + if (backArr.length > 0) return; + // 第一个矩形边 const fillColor = typeof value === 'string' ? value : '#1890ff'; // 边缘路径的起始位置 const startPoint = keyShape.getPoint(0); - back1 = group.addShape('circle', { + const back1 = group.addShape('circle', { attrs: { x: startPoint.x, y: startPoint.y, @@ -159,6 +150,7 @@ export function edgeLineAnimateState() { // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'circle-stroke1', }); + back1.show(); back1.animate( (ratio: any) => { // 每帧中的操作。比率范围从 0 到 1，表示动画的进度。返回修改后的配置 @@ -177,7 +169,7 @@ export function edgeLineAnimateState() { ); // 第二个矩形边 const endPoint = keyShape.getPoint(1); - back2 = group.addShape('circle', { + const back2 = group.addShape('circle', { zIndex: -2, attrs: { x: endPoint.x, @@ -188,7 +180,7 @@ export function edgeLineAnimateState() { // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性 name: 'circle-stroke2', }); - + back2.show(); back2.animate( (ratio: any) => { // 每帧中的操作。比率范围从 0 到 1，表示动画的进度。返回修改后的配置 @@ -205,6 +197,14 @@ export function edgeLineAnimateState() { duration: 2 * 1000, // 执行一次的持续时间 } ); + } else { + if (backArr.length <= 0) return; + backArr.forEach((ele: any) => { + ele.hide(); + ele.remove(); + ele.destroy(); + }); + backArr.length = 0; } return; } @@ -212,11 +212,7 @@ export function edgeLineAnimateState() { // line-dash 虚线运动 if (name === 'line-dash') { if (value) { - keyShape.stopAnimate(); - keyShape.attr({ - lineDash: null, - lineDashOffset: null, - }); + if (keyShape.cfg.animating) return; let index = 0; keyShape.animate( () => { @@ -234,6 +230,12 @@ export function edgeLineAnimateState() { duration: 3000, // 执行一次的持续时间 } ); + } else { + keyShape.stopAnimate(); + keyShape.attr({ + lineDash: null, + lineDashOffset: null, + }); } return; } @@ -246,6 +248,7 @@ export function edgeLineAnimateState() { back.remove(); back.destroy(); } + const { path, stroke, lineWidth } = keyShape.attr(); back = group.addShape('path', { attrs: { diff --git a/src/views/monitor/topologyBuild/hooks/registerNode.ts b/src/views/monitor/topologyBuild/hooks/registerNode.ts index 50721d3e..4de3edd2 100644 --- a/src/views/monitor/topologyBuild/hooks/registerNode.ts +++ b/src/views/monitor/topologyBuild/hooks/registerNode.ts @@ -300,12 +300,23 @@ export function nodeImageAnimateState() { ele.get('name').startsWith('circle-shape') ); if (value) { - if (Array.isArray(backArr) && backArr.length === 3) return; + const fillColor = typeof value === 'string' ? value : '#f5222d'; + // 移除 + if (Array.isArray(backArr) && backArr.length >= 3) { + for (const back of backArr) { + back.stopAnimate(); + back.hide(); + back.remove(); + back.destroy(); + } + backArr.length = 0; + } + + // 根据大小确定半径 const size = Array.isArray(model?.size) ? model?.size : [40, 40]; const x = size[0] / 2; const y = -size[1] / 2; const r = 3; - const fillColor = typeof value === 'string' ? value : '#f5222d'; // 第一个背景圆 const back1 = group.addShape('circle', { diff --git a/src/views/ne-data/base-station/components/list.vue b/src/views/ne-data/base-station/components/list.vue new file mode 100644 index 00000000..64769c9c --- /dev/null +++ b/src/views/ne-data/base-station/components/list.vue @@ -0,0 +1,593 @@ + + + + + diff --git a/src/views/ne-data/base-station/components/topology.vue b/src/views/ne-data/base-station/components/topology.vue new file mode 100644 index 00000000..673b7b39 --- /dev/null +++ b/src/views/ne-data/base-station/components/topology.vue @@ -0,0 +1,557 @@ + + + + + diff --git a/src/views/ne-data/base-station/index.vue b/src/views/ne-data/base-station/index.vue new file mode 100644 index 00000000..60d1ab2b --- /dev/null +++ b/src/views/ne-data/base-station/index.vue @@ -0,0 +1,40 @@ + + + + +