渲染页面
<template><div><div id="topology-container"></div></div>
</template>
js逻辑渲染实线、虚线
<script>
import go from 'gojs';export default {mounted() {this.initDiagram();},methods: {// 加载initDiagram() {const $ = go.GraphObject.make;const diagram = $(go.Diagram, "topology-container", {initialContentAlignment: go.Spot.Center,"undoManager.isEnabled": true,// layout: $(go.ForceDirectedLayout) // 自动布局});// 节点模板diagram.nodeTemplate = $(go.Node, "Auto",$(go.Shape, {fill: "white",strokeWidth: 2,stroke: "black"},new go.Binding("fill", "status", (status) =>status === "正常" ? "lightgreen" : "lightcoral")),$(go.TextBlock, {margin: 20,stroke: "black",font: "12px sans-serif"},new go.Binding("text", "name")));// 创建模板映射const templmap = new go.Map();const lineColor = "white";// 默认实线模板const defaultTemplate = $(go.Link,{ routing: go.Link.AvoidsNodes },$(go.Shape, {stroke: lineColor,strokeWidth: 2}),$(go.Shape, {toArrow: "Standard",fill: lineColor,stroke: lineColor}));// 虚线模板（带动画支持）const dashedTemplate = $(go.Link,{routing: go.Link.AvoidsNodes,selectionAdorned: false},$(go.Shape, {name: "dashedLink",stroke: "#FFA500", // 橙色虚线strokeWidth: 3,strokeDashArray: [8, 4] // 虚线样式}),$(go.Shape, {toArrow: "Standard",fill: "#FFA500",stroke: "#FFA500"}));// 添加到模板映射templmap.add("", defaultTemplate); // 默认模板templmap.add("dashed", dashedTemplate); // 虚线模板diagram.linkTemplateMap = templmap;// 节点数据const nodeDataArray = [{ key: 1, name: "遥测处理", status: "正常" },{ key: 2, name: "系统监控", status: "异常" },{ key: 3, name: "拓扑指标1", status: "正常" },{ key: 4, name: "站监控", status: "异常" },{ key: 5, name: "轨道计算管理", status: "正常" },{ key: 6, name: "遥测处理服务器", status: "正常" },{ key: 7, name: "任务编排服务器", status: "正常" },{ key: 8, name: "站监控服务器", status: "异常" },];// 连接数据（使用category指定虚线）const linkDataArray = [{ from: 3, to: 4, category: "solid", id: 2 },{ from: 4, to: 5, category: "dashed", id: 3 },{ from: 5, to: 6, category: "dashed", id: 4 },{ from: 6, to: 7, category: "solid", id: 5 }];diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);// 保存diagram引用到Vue实例this.diagram = diagram;// 虚线动画效果this.animateDashedLinks(diagram);},animateDashedLinks(diagram) {// 找到所有虚线连接const dashedLinks = [];diagram.links.each(link => {if (link.category === "dashed") {dashedLinks.push(link);}});// 为每条虚线添加动画let offset = 0;setInterval(() => {offset = (offset + 2) % 24; // 24是虚线样式的总长度(8+4)*2dashedLinks.forEach(link => {const shape = link.findObject("dashedLink");if (shape) {shape.strokeDashOffset = offset;}});this.diagram.updateAllTargetBindings();}, 50);},}
};
</script>
<style scoped>
#topology-container {width: 100%;height: 600px;background-color: #3740be;border: 1px solid #ccc;
}
</style>
