diff --git a/src/views/dashboard/overview/hooks/useTopology.ts b/src/views/dashboard/overview/hooks/useTopology.ts index 4e57723a..7610f561 100644 --- a/src/views/dashboard/overview/hooks/useTopology.ts +++ b/src/views/dashboard/overview/hooks/useTopology.ts @@ -15,6 +15,8 @@ export const notNeNodes = [ 'lan5', 'lan6', 'lan7', + 'LAN', + 'NR', ]; /**图状态 */ @@ -114,9 +116,10 @@ export function neStateParse(neType: string, data: Record) { const neS = nodes.find((n: any) => n.id === edgeSource); const neT = nodes.find((n: any) => n.id === edgeTarget); // console.log(neS, edgeSource, neT, edgeTarget); - // 通过 ID 查询节点实例 - const item = graphG6.value.findById(edge.id); - if (neS && neT && item) { + + if (neS && neT) { + // 通过 ID 查询节点实例 + // const item = graphG6.value.findById(edge.id); // console.log( // `${edgeSource} - ${edgeTarget}`, // neS.neState.online && neT.neState.online @@ -136,16 +139,16 @@ export function neStateParse(neType: string, data: Record) { // }); // 设置状态 graphG6.value.setItemState( - item, + edge.id, 'line-dash', neS.neState.online && neT.neState.online ); } if (neS && notNeNodes.includes(edgeTarget)) { - graphG6.value.setItemState(item, 'line-dash', neT.neState.online); + graphG6.value.setItemState(edge.id, 'line-path', neS.neState.online); } if (neT && notNeNodes.includes(edgeSource)) { - graphG6.value.setItemState(item, 'line-dash', neT.neState.online); + graphG6.value.setItemState(edge.id, 'line-path', neT.neState.online); } } } diff --git a/src/views/monitor/topologyArchitecture/index.vue b/src/views/monitor/topologyArchitecture/index.vue index d5e6f2cc..3ff3a6dc 100644 --- a/src/views/monitor/topologyArchitecture/index.vue +++ b/src/views/monitor/topologyArchitecture/index.vue @@ -57,6 +57,8 @@ const notNeNodes = [ 'lan5', 'lan6', 'lan7', + 'LAN', + 'NR', ]; /**图实例对象 */ @@ -419,9 +421,10 @@ function wsMessage(res: Record) { const neS = nodes.find((n: any) => n.id === edgeSource); const neT = nodes.find((n: any) => n.id === edgeTarget); // console.log(neS, edgeSource, neT, edgeTarget); - // 通过 ID 查询节点实例 - const item = graphG6.value.findById(edge.id); - if (neS && neT && item) { + + if (neS && neT) { + // 通过 ID 查询节点实例 + // const item = graphG6.value.findById(edge.id); // console.log( // `${edgeSource} - ${edgeTarget}`, // neS.neState.online && neT.neState.online @@ -441,16 +444,16 @@ function wsMessage(res: Record) { // }); // 设置状态 graphG6.value.setItemState( - item, + edge.id, 'line-dash', neS.neState.online && neT.neState.online ); } if (neS && notNeNodes.includes(edgeTarget)) { - graphG6.value.setItemState(item, 'line-dash', neT.neState.online); + graphG6.value.setItemState(edge.id, 'line-path', neS.neState.online); } if (neT && notNeNodes.includes(edgeSource)) { - graphG6.value.setItemState(item, 'line-dash', neT.neState.online); + graphG6.value.setItemState(edge.id, 'line-path', neT.neState.online); } } } diff --git a/src/views/monitor/topologyBuild/hooks/registerEdge.ts b/src/views/monitor/topologyBuild/hooks/registerEdge.ts index babe5a7f..8b9d1eb2 100644 --- a/src/views/monitor/topologyBuild/hooks/registerEdge.ts +++ b/src/views/monitor/topologyBuild/hooks/registerEdge.ts @@ -208,11 +208,15 @@ export function edgeLineAnimateState() { } return; } - + // line-dash 虚线运动 if (name === 'line-dash') { if (value) { - if (keyShape.cfg.animating) return; + keyShape.stopAnimate(); + keyShape.attr({ + lineDash: null, + lineDashOffset: null, + }); let index = 0; keyShape.animate( () => { @@ -221,7 +225,7 @@ export function edgeLineAnimateState() { index = 0; } return { - lineDash: [4, 2, 2, 2], + lineDash: [4, 2, 1, 2], lineDashOffset: -index, }; }, @@ -230,12 +234,6 @@ export function edgeLineAnimateState() { duration: 3000, // 执行一次的持续时间 } ); - } else { - keyShape.stopAnimate(); - keyShape.attr({ - lineDash: null, - lineDashOffset: null, - }); } return; }