diff --git a/package.json b/package.json
index 377e4addc..122cf47f9 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "@antv/x6": "^2.18.1",
+    "@antv/x6-vue-shape": "^2.1.2",
     "@turf/turf": "^7.1.0",
     "@visactor/vtable": "^1.13.2",
     "@visactor/vtable-gantt": "^1.13.2",
@@ -24,6 +26,7 @@
     "chroma-js": "^3.1.2",
     "dayjs": "^1.11.13",
     "echarts": "^5.5.1",
+    "elkjs": "^0.10.0",
     "es-toolkit": "^1.32.0",
     "lodash": "^4.17.21",
     "maplibre-gl": "^5.0.1",
diff --git a/public/images/topology/a.png b/public/images/topology/a.png
new file mode 100644
index 000000000..203960baf
Binary files /dev/null and b/public/images/topology/a.png differ
diff --git a/public/images/topology/arrow-bottom.png b/public/images/topology/arrow-bottom.png
new file mode 100644
index 000000000..5e586f823
Binary files /dev/null and b/public/images/topology/arrow-bottom.png differ
diff --git a/public/images/topology/arrow-left.png b/public/images/topology/arrow-left.png
new file mode 100644
index 000000000..37435b9d5
Binary files /dev/null and b/public/images/topology/arrow-left.png differ
diff --git a/public/images/topology/com.png b/public/images/topology/com.png
new file mode 100644
index 000000000..0a2329f75
Binary files /dev/null and b/public/images/topology/com.png differ
diff --git a/public/images/topology/cpu.png b/public/images/topology/cpu.png
new file mode 100644
index 000000000..cffefe6ab
Binary files /dev/null and b/public/images/topology/cpu.png differ
diff --git a/public/images/topology/duankai.png b/public/images/topology/duankai.png
new file mode 100644
index 000000000..24d327663
Binary files /dev/null and b/public/images/topology/duankai.png differ
diff --git a/public/images/topology/fwq.png b/public/images/topology/fwq.png
new file mode 100644
index 000000000..c9a11cd13
Binary files /dev/null and b/public/images/topology/fwq.png differ
diff --git a/public/images/topology/hezi.png b/public/images/topology/hezi.png
new file mode 100644
index 000000000..a2244664e
Binary files /dev/null and b/public/images/topology/hezi.png differ
diff --git a/public/images/topology/xinhao.png b/public/images/topology/xinhao.png
new file mode 100644
index 000000000..8552bda0b
Binary files /dev/null and b/public/images/topology/xinhao.png differ
diff --git a/public/images/topology/yp.png b/public/images/topology/yp.png
new file mode 100644
index 000000000..202fd5c67
Binary files /dev/null and b/public/images/topology/yp.png differ
diff --git a/public/images/topology/zhuji.png b/public/images/topology/zhuji.png
new file mode 100644
index 000000000..f17fdc5d9
Binary files /dev/null and b/public/images/topology/zhuji.png differ
diff --git a/public/json/topology.json b/public/json/topology.json
new file mode 100644
index 000000000..dda198006
--- /dev/null
+++ b/public/json/topology.json
@@ -0,0 +1,1512 @@
+{
+    "id": "content",
+    "children": [
+        {
+            "id": "a1",
+            "type": "a",
+            "x": 36,
+            "y": 68,
+            "parentId": "left",
+            "ports": [
+                {
+                    "id": "a1_p1",
+                    "group": "left"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a2",
+            "type": "a",
+            "parentId": "left",
+            "x": 36,
+            "y": 128,
+            "ports": [
+                {
+                    "id": "a2_p1",
+                    "group": "left"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a3",
+            "type": "a",
+            "parentId": "left",
+            "x": 36,
+            "y": 182,
+            "ports": [
+                {
+                    "id": "a3_p1",
+                    "group": "left"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a4",
+            "type": "a",
+            "parentId": "left",
+            "x": 36,
+            "y": 238,
+            "ports": [
+                {
+                    "id": "a4_p1",
+                    "group": "left"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a5",
+            "type": "a",
+            "parentId": "left",
+            "x": 36,
+            "y": 320,
+            "ports": [
+                {
+                    "id": "a5_p1"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a6",
+            "type": "a",
+            "parentId": "left",
+            "x": 36,
+            "y": 377,
+            "ports": [
+                {
+                    "id": "a6_p1"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a7",
+            "type": "a",
+            "parentId": "left",
+            "x": 36,
+            "y": 434,
+            "ports": [
+                {
+                    "id": "a7_p1"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a8",
+            "type": "a",
+            "parentId": "left",
+            "x": 36,
+            "y": 561.5,
+            "ports": [
+                {
+                    "id": "a8_p1"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "cpu1",
+            "type": "cpu",
+            "parentId": "left",
+            "x": 226,
+            "y": 136,
+            "ports": [
+                {
+                    "id": "cpu1_p1"
+                },
+                {
+                    "id": "cpu1_p2"
+                }
+            ],
+            "width": 72,
+            "height": 86,
+            "infos": {
+                "width": 75,
+                "height": 55,
+                "x": 226,
+                "y": 70,
+                "cpu": "80%",
+                "neicun": "70%",
+                "yingpan": "50%"
+            }
+        },
+        {
+            "id": "cpu2",
+            "type": "cpu",
+            "parentId": "left",
+            "x": 226,
+            "y": 354,
+            "ports": [
+                {
+                    "id": "cpu2_p1"
+                },
+                {
+                    "id": "cpu2_p2"
+                }
+            ],
+            "width": 72,
+            "height": 86,
+            "infos": {
+                "width": 75,
+                "height": 55,
+                "x": 226,
+                "y": 288,
+                "cpu": "80%",
+                "neicun": "70%",
+                "yingpan": "50%"
+            }
+        },
+        {
+            "id": "cpu3",
+            "type": "cpu",
+            "parentId": "left",
+            "x": 226,
+            "y": 538,
+            "ports": [
+                {
+                    "id": "cpu3_p1"
+                },
+                {
+                    "id": "cpu3_p2"
+                }
+            ],
+            "width": 72,
+            "height": 86,
+            "infos": {
+                "width": 75,
+                "height": 55,
+                "x": 226,
+                "y": 472,
+                "cpu": "80%",
+                "neicun": "70%",
+                "yingpan": "50%"
+            }
+        },
+        {
+            "id": "cpu4",
+            "type": "cpu",
+            "parentId": "center",
+            "x": 416,
+            "y": 136,
+            "ports": [
+                {
+                    "id": "cpu4_p1"
+                },
+                {
+                    "id": "cpu4_p2"
+                }
+            ],
+            "width": 72,
+            "height": 86,
+            "infos": {
+                "width": 75,
+                "height": 55,
+                "x": 416,
+                "y": 70,
+                "cpu": "80%",
+                "neicun": "70%",
+                "yingpan": "50%"
+            }
+        },
+        {
+            "id": "cpu5",
+            "type": "cpu",
+            "parentId": "center",
+            "x": 416,
+            "y": 354,
+            "ports": [
+                {
+                    "id": "cpu5_p1"
+                },
+                {
+                    "id": "cpu5_p2"
+                }
+            ],
+            "width": 72,
+            "height": 86,
+            "infos": {
+                "width": 75,
+                "height": 55,
+                "x": 416,
+                "y": 288,
+                "cpu": "80%",
+                "neicun": "70%",
+                "yingpan": "50%"
+            }
+        },
+        {
+            "id": "cpu6",
+            "type": "cpu",
+            "parentId": "center",
+            "x": 416,
+            "y": 538,
+            "ports": [
+                {
+                    "id": "cpu6_p1"
+                },
+                {
+                    "id": "cpu6_p2"
+                }
+            ],
+            "width": 72,
+            "height": 86,
+            "infos": {
+                "width": 75,
+                "height": 55,
+                "x": 416,
+                "y": 472,
+                "cpu": "80%",
+                "neicun": "70%",
+                "yingpan": "50%"
+            }
+        },
+        {
+            "id": "fwq1",
+            "type": "fwq",
+            "parentId": "center",
+            "x": 566,
+            "y": 266,
+            "ports": [
+                {
+                    "id": "fwq1_p1"
+                },
+                {
+                    "id": "fwq1_p2"
+                }
+            ],
+            "width": 36,
+            "height": 86
+        },
+        {
+            "id": "a9",
+            "type": "a",
+            "parentId": "center",
+            "x": 761,
+            "y": 63,
+            "ports": [
+                {
+                    "id": "a9_p1"
+                },
+                {
+                    "id": "a9_p2"
+                },
+                {
+                    "id": "a9_p3"
+                },
+                {
+                    "id": "a9_p4"
+                }
+            ],
+            "width": 47,
+            "height": 60
+        },
+        {
+            "id": "xinhao",
+            "type": "xinhao",
+            "parentId": "center",
+            "x": 480,
+            "y": 23,
+            "ports": [
+                {
+                    "id": "xinhao_p1"
+                }
+            ],
+            "width": 33,
+            "height": 33
+        },
+        {
+            "id": "hezi",
+            "type": "hezi",
+            "parentId": "center",
+            "x": 650,
+            "y": 65,
+            "ports": [
+                {
+                    "id": "hezi_p1"
+                }
+            ],
+            "width": 54.44,
+            "height": 56
+        },
+        {
+            "id": "yp2",
+            "type": "yp",
+            "parentId": "center",
+            "x": 856,
+            "y": 53,
+            "ports": [
+                {
+                    "id": "yp2_p1"
+                }
+            ],
+            "width": 48,
+            "height": 86,
+            "infos": {
+                "width": 115,
+                "height": 55,
+                "x": 916,
+                "y": 60,
+                "shuju": "128G/520G",
+                "cpu": "80%",
+                "neicun": "70%",
+                "yingpan": "50%"
+            }
+        },
+        {
+            "id": "a10",
+            "type": "a",
+            "parentId": "center",
+            "x": 686,
+            "y": 189,
+            "ports": [
+                {
+                    "id": "a10_p1"
+                },
+                {
+                    "id": "a10_p2"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a11",
+            "type": "a",
+            "parentId": "center",
+            "x": 686,
+            "y": 259,
+            "ports": [
+                {
+                    "id": "a11_p1"
+                },
+                {
+                    "id": "a11_p2"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a12",
+            "type": "a",
+            "parentId": "center",
+            "x": 686,
+            "y": 329,
+            "ports": [
+                {
+                    "id": "a12_p1"
+                },
+                {
+                    "id": "a12_p2"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a13",
+            "type": "a",
+            "parentId": "center",
+            "x": 686,
+            "y": 399,
+            "ports": [
+                {
+                    "id": "a13_p1"
+                },
+                {
+                    "id": "a13_p2"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "fwq2",
+            "type": "fwq",
+            "parentId": "center",
+            "x": 691,
+            "y": 503,
+            "ports": [
+                {
+                    "id": "fwq2_p1"
+                }
+            ],
+            "width": 36,
+            "height": 86
+        },
+        {
+            "id": "cpu7",
+            "type": "cpu",
+            "parentId": "center",
+            "x": 836,
+            "y": 273,
+            "ports": [
+                {
+                    "id": "cpu7_p1"
+                },
+                {
+                    "id": "cpu7_p2"
+                }
+            ],
+            "width": 72,
+            "height": 86,
+            "infos": {
+                "width": 75,
+                "height": 55,
+                "x": 836,
+                "y": 207,
+                "cpu": "80%",
+                "neicun": "70%",
+                "yingpan": "50%"
+            }
+        },
+        {
+            "id": "cpu8",
+            "type": "cpu",
+            "parentId": "right",
+            "x": 1016,
+            "y": 273,
+            "ports": [
+                {
+                    "id": "cpu8_p1"
+                },
+                {
+                    "id": "cpu8_p2"
+                }
+            ],
+            "width": 72,
+            "height": 86,
+            "infos": {
+                "width": 75,
+                "height": 55,
+                "x": 1016,
+                "y": 207,
+                "cpu": "80%",
+                "neicun": "70%",
+                "yingpan": "50%"
+            }
+        },
+        {
+            "id": "rect1",
+            "type": "rect",
+            "parentId": "right",
+            "x": 1156,
+            "y": 30,
+            "ports": [
+                {
+                    "id": "rect1_p1"
+                },
+                {
+                    "id": "rect1_p2"
+                }
+            ],
+            "width": 194,
+            "height": 591
+        },
+        {
+            "id": "yp1",
+            "type": "yp",
+            "parentId": "right",
+            "x": 1186,
+            "y": 273,
+            "ports": [
+                {
+                    "id": "yp1_p1"
+                },
+                {
+                    "id": "yp1_p2"
+                }
+            ],
+            "width": 48,
+            "height": 86,
+            "infos": {
+                "width": 115,
+                "height": 55,
+                "x": 1145,
+                "y": 190,
+                "shuju": "128G/520G",
+                "cpu": "80%",
+                "neicun": "70%",
+                "yingpan": "50%"
+            }
+        },
+        {
+            "id": "fwq3",
+            "type": "fwq",
+            "parentId": "right",
+            "x": 1281,
+            "y": 189,
+            "ports": [
+                {
+                    "id": "fwq3_p1"
+                },
+                {
+                    "id": "fwq3_p2"
+                }
+            ],
+            "width": 36,
+            "height": 86
+        },
+        {
+            "id": "fwq4",
+            "type": "fwq",
+            "parentId": "right",
+            "x": 1281,
+            "y": 359,
+            "ports": [
+                {
+                    "id": "fwq4_p1"
+                },
+                {
+                    "id": "fwq4_p2"
+                }
+            ],
+            "width": 36,
+            "height": 86
+        },
+        {
+            "id": "zhuji",
+            "type": "zhuji",
+            "parentId": "right",
+            "x": 1241,
+            "y": 507,
+            "ports": [],
+            "width": 53,
+            "height": 81
+        },
+        {
+            "id": "rect2",
+            "type": "rect",
+            "parentId": "right",
+            "x": 1383,
+            "y": 30,
+            "ports": [],
+            "width": 378,
+            "height": 591
+        },
+        {
+            "id": "a14",
+            "type": "a",
+            "x": 1441,
+            "y": 68,
+            "parentId": "right",
+            "ports": [
+                {
+                    "id": "a14_p1"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a15",
+            "type": "a",
+            "x": 1441,
+            "y": 145,
+            "parentId": "right",
+            "ports": [
+                {
+                    "id": "a15_p1"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a16",
+            "type": "a",
+            "x": 1441,
+            "y": 222,
+            "parentId": "right",
+            "ports": [
+                {
+                    "id": "a16_p1"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a17",
+            "type": "a",
+            "x": 1441,
+            "y": 374,
+            "parentId": "right",
+            "ports": [
+                {
+                    "id": "a17_p1"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a18",
+            "type": "a",
+            "x": 1441,
+            "y": 451,
+            "parentId": "right",
+            "ports": [
+                {
+                    "id": "a18_p1"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "a19",
+            "type": "a",
+            "x": 1441,
+            "y": 528,
+            "parentId": "right",
+            "ports": [
+                {
+                    "id": "a19_p1"
+                }
+            ],
+            "width": 47,
+            "height": 39
+        },
+        {
+            "id": "fwq5",
+            "type": "fwq",
+            "x": 1548,
+            "y": 275,
+            "parentId": "right",
+            "ports": [
+                {
+                    "id": "fwq5_p1"
+                },
+                {
+                    "id": "fwq5_p2"
+                }
+            ],
+            "width": 36,
+            "height": 86
+        },
+        {
+            "id": "com1",
+            "type": "com",
+            "x": 1659,
+            "y": 174,
+            "parentId": "right",
+            "ports": [
+                {
+                    "id": "com1_p1"
+                }
+            ],
+            "width": 64,
+            "height": 52
+        },
+        {
+            "id": "com2",
+            "type": "com",
+            "x": 1659,
+            "y": 292,
+            "parentId": "right",
+            "ports": [
+                {
+                    "id": "com2_p1"
+                }
+            ],
+            "width": 64,
+            "height": 52
+        },
+        {
+            "id": "com3",
+            "type": "com",
+            "x": 1659,
+            "y": 410,
+            "parentId": "right",
+            "ports": [
+                {
+                    "id": "com3_p1"
+                }
+            ],
+            "width": 64,
+            "height": 52
+        }
+    ],
+    "edges": [
+        {
+            "id": "e0",
+            "sources": {
+                "cell": "a1",
+                "port": "a1_p1"
+            },
+            "targets": {
+                "cell": "cpu1",
+                "port": "cpu1_p1"
+            },
+            "isTrue": false
+        },
+        {
+            "id": "e1",
+            "sources": {
+                "cell": "a2",
+                "port": "a2_p1"
+            },
+            "targets": {
+                "cell": "cpu1",
+                "port": "cpu1_p1"
+            }
+        },
+        {
+            "id": "e2",
+            "sources": {
+                "cell": "a3",
+                "port": "a3_p1"
+            },
+            "targets": {
+                "cell": "cpu1",
+                "port": "cpu1_p1"
+            }
+        },
+        {
+            "id": "e3",
+            "sources": {
+                "cell": "a4",
+                "port": "a4_p1"
+            },
+            "targets": {
+                "cell": "cpu1",
+                "port": "cpu1_p1"
+            }
+        },
+        {
+            "id": "e3",
+            "sources": {
+                "cell": "cpu1",
+                "port": "cpu1_p2"
+            },
+            "targets": {
+                "cell": "cpu4",
+                "port": "cpu4_p1"
+            }
+        },
+        {
+            "id": "e3",
+            "sources": {
+                "cell": "cpu2",
+                "port": "cpu2_p2"
+            },
+            "targets": {
+                "cell": "cpu5",
+                "port": "cpu5_p1"
+            }
+        },
+        {
+            "id": "e3",
+            "sources": {
+                "cell": "cpu3",
+                "port": "cpu3_p2"
+            },
+            "targets": {
+                "cell": "cpu6",
+                "port": "cpu6_p1"
+            }
+        },
+        {
+            "id": "e4",
+            "sources": {
+                "cell": "a5",
+                "port": "a5_p1"
+            },
+            "targets": {
+                "cell": "cpu2",
+                "port": "cpu2_p1"
+            }
+        },
+        {
+            "id": "e5",
+            "sources": {
+                "cell": "a6",
+                "port": "a6_p1"
+            },
+            "targets": {
+                "cell": "cpu2",
+                "port": "cpu2_p1"
+            }
+        },
+        {
+            "id": "e6",
+            "sources": {
+                "cell": "a7",
+                "port": "a7_p1"
+            },
+            "targets": {
+                "cell": "cpu2",
+                "port": "cpu2_p1"
+            }
+        },
+        {
+            "id": "e7",
+            "sources": {
+                "cell": "a8",
+                "port": "a8_p1"
+            },
+            "targets": {
+                "cell": "cpu3",
+                "port": "cpu3_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "cpu4",
+                "port": "cpu4_p2"
+            },
+            "targets": {
+                "cell": "fwq1",
+                "port": "fwq1_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "cpu5",
+                "port": "cpu5_p2"
+            },
+            "targets": {
+                "cell": "fwq1",
+                "port": "fwq1_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "fwq1",
+                "port": "fwq1_p2"
+            },
+            "targets": {
+                "cell": "a9",
+                "port": "a9_p2"
+            },
+            "vertices": [
+                {
+                    "x": 584,
+                    "y": 150
+                },
+                {
+                    "x": 773,
+                    "y": 150
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "fwq1",
+                "port": "fwq1_p2"
+            },
+            "targets": {
+                "cell": "a9",
+                "port": "a9_p2"
+            },
+            "vertices": [
+                {
+                    "x": 584,
+                    "y": 150
+                },
+                {
+                    "x": 773,
+                    "y": 150
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "fwq1",
+                "port": "fwq1_p2"
+            },
+            "targets": {
+                "cell": "a10",
+                "port": "a10_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "fwq1",
+                "port": "fwq1_p2"
+            },
+            "targets": {
+                "cell": "a11",
+                "port": "a11_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "fwq1",
+                "port": "fwq1_p2"
+            },
+            "targets": {
+                "cell": "a12",
+                "port": "a12_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "fwq1",
+                "port": "fwq1_p2"
+            },
+            "targets": {
+                "cell": "a13",
+                "port": "a13_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "fwq2",
+                "port": "fwq2_p2"
+            },
+            "targets": {
+                "cell": "cpu7",
+                "port": "cpu7_p1"
+            },
+            "vertices": [
+                {
+                    "x": 784.5,
+                    "y": 545
+                },
+                {
+                    "x": 784.5,
+                    "y": 316
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a10",
+                "port": "a10_p2"
+            },
+            "targets": {
+                "cell": "cpu7",
+                "port": "cpu7_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a11",
+                "port": "a11_p2"
+            },
+            "targets": {
+                "cell": "cpu7",
+                "port": "cpu7_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a12",
+                "port": "a12_p2"
+            },
+            "targets": {
+                "cell": "cpu7",
+                "port": "cpu7_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a13",
+                "port": "a13_p2"
+            },
+            "targets": {
+                "cell": "cpu7",
+                "port": "cpu7_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a10",
+                "port": "a10_p2"
+            },
+            "targets": {
+                "cell": "a9",
+                "port": "a9_p2"
+            },
+            "vertices": [
+                {
+                    "x": 784.5,
+                    "y": 208.5
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a9",
+                "port": "a9_p2"
+            },
+            "targets": {
+                "cell": "a10",
+                "port": "a10_p2"
+            },
+            "vertices": [
+                {
+                    "x": 784.5,
+                    "y": 208.5
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a9",
+                "port": "a9_p2"
+            },
+            "targets": {
+                "cell": "a11",
+                "port": "a11_p2"
+            },
+            "vertices": [
+                {
+                    "x": 784.5,
+                    "y": 278.5
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a9",
+                "port": "a9_p2"
+            },
+            "targets": {
+                "cell": "a12",
+                "port": "a12_p2"
+            },
+            "vertices": [
+                {
+                    "x": 784.5,
+                    "y": 348.5
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a9",
+                "port": "a9_p2"
+            },
+            "targets": {
+                "cell": "a13",
+                "port": "a13_p2"
+            },
+            "vertices": [
+                {
+                    "x": 784.5,
+                    "y": 418.5
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a9",
+                "port": "a9_p2"
+            },
+            "targets": {
+                "cell": "a13",
+                "port": "a13_p2"
+            },
+            "vertices": [
+                {
+                    "x": 784.5,
+                    "y": 418.5
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a9",
+                "port": "a9_p2"
+            },
+            "targets": {
+                "cell": "fwq2",
+                "port": "fwq2_p2"
+            },
+            "vertices": [
+                {
+                    "x": 784.5,
+                    "y": 545
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a9",
+                "port": "a9_p2"
+            },
+            "targets": {
+                "cell": "cpu7",
+                "port": "cpu7_p1"
+            },
+            "vertices": [
+                {
+                    "x": 804.5,
+                    "y": 285
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "cpu7",
+                "port": "cpu7_p2"
+            },
+            "targets": {
+                "cell": "cpu8",
+                "port": "cpu8_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "yp1",
+                "port": "yp1_p1"
+            },
+            "targets": {
+                "cell": "fwq3",
+                "port": "fwq3_p1"
+            },
+            "vertices": [
+                {
+                    "x": 1210,
+                    "y": 232
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "yp1",
+                "port": "yp1_p1"
+            },
+            "targets": {
+                "cell": "fwq4",
+                "port": "fwq4_p1"
+            },
+            "vertices": [
+                {
+                    "x": 1210,
+                    "y": 402
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "fwq3",
+                "port": "fwq3_p1"
+            },
+            "targets": {
+                "cell": "yp1",
+                "port": "yp1_p1"
+            },
+            "vertices": [
+                {
+                    "x": 1210,
+                    "y": 232
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "fwq4",
+                "port": "fwq4_p1"
+            },
+            "targets": {
+                "cell": "yp1",
+                "port": "yp1_p1"
+            },
+            "vertices": [
+                {
+                    "x": 1210,
+                    "y": 402
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "cpu8",
+                "port": "cpu8_p2"
+            },
+            "targets": {
+                "cell": "rect1",
+                "port": "rect1_p1"
+            },
+            "vertices": [
+                {
+                    "x": 1100,
+                    "y": 315
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "rect1",
+                "port": "rect1_p2"
+            },
+            "targets": {
+                "cell": "a14",
+                "port": "a14_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "rect1",
+                "port": "rect1_p2"
+            },
+            "targets": {
+                "cell": "a15",
+                "port": "a15_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "rect1",
+                "port": "rect1_p2"
+            },
+            "targets": {
+                "cell": "a16",
+                "port": "a16_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "rect1",
+                "port": "rect1_p2"
+            },
+            "targets": {
+                "cell": "a17",
+                "port": "a17_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "rect1",
+                "port": "rect1_p2"
+            },
+            "targets": {
+                "cell": "a18",
+                "port": "a18_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "rect1",
+                "port": "rect1_p2"
+            },
+            "targets": {
+                "cell": "a19",
+                "port": "a19_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a14",
+                "port": "a14_p1"
+            },
+            "targets": {
+                "cell": "rect1",
+                "port": "rect1_p2"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a15",
+                "port": "a15_p1"
+            },
+            "targets": {
+                "cell": "rect1",
+                "port": "rect1_p2"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a16",
+                "port": "a16_p1"
+            },
+            "targets": {
+                "cell": "rect1",
+                "port": "rect1_p2"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a17",
+                "port": "a17_p1"
+            },
+            "targets": {
+                "cell": "rect1",
+                "port": "rect1_p2"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a18",
+                "port": "a18_p1"
+            },
+            "targets": {
+                "cell": "rect1",
+                "port": "rect1_p2"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a19",
+                "port": "a19_p1"
+            },
+            "targets": {
+                "cell": "rect1",
+                "port": "rect1_p2"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "fwq5",
+                "port": "fwq5_p2"
+            },
+            "targets": {
+                "cell": "com1",
+                "port": "com1_p1"
+            },
+            "vertices": [
+                {
+                    "x": 1566,
+                    "y": 200
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "fwq5",
+                "port": "fwq5_p2"
+            },
+            "targets": {
+                "cell": "com2",
+                "port": "com2_p1"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "fwq5",
+                "port": "fwq5_p2"
+            },
+            "targets": {
+                "cell": "com3",
+                "port": "com3_p1"
+            },
+            "vertices": [
+                {
+                    "x": 1566,
+                    "y": 436
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "xinhao",
+                "port": "xinhao_p1"
+            },
+            "targets": {
+                "cell": "a9",
+                "port": "a9_p3"
+            },
+            "vertices": [
+                {
+                    "x": 785,
+                    "y": 40
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "hezi",
+                "port": "hezi_p1"
+            },
+            "targets": {
+                "cell": "a9",
+                "port": "a9_p3"
+            }
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "a9",
+                "port": "a9_p3"
+            },
+            "targets": {
+                "cell": "yp2",
+                "port": "yp2_p1"
+            },
+            "vertices": [
+                {
+                    "x": 856,
+                    "y": 92.5
+                }
+            ]
+        },
+        {
+            "id": "e13",
+            "sources": {
+                "cell": "yp2",
+                "port": "yp2_p1"
+            },
+            "targets": {
+                "cell": "a9",
+                "port": "a9_p3"
+            },
+            "vertices": [
+                {
+                    "x": 856,
+                    "y": 92.5
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/image/topology/cpuicon.png b/src/assets/image/topology/cpuicon.png
new file mode 100644
index 000000000..fcbf844d7
Binary files /dev/null and b/src/assets/image/topology/cpuicon.png differ
diff --git a/src/assets/image/topology/neicun.png b/src/assets/image/topology/neicun.png
new file mode 100644
index 000000000..c51306a1a
Binary files /dev/null and b/src/assets/image/topology/neicun.png differ
diff --git a/src/assets/image/topology/topology_bg.png b/src/assets/image/topology/topology_bg.png
new file mode 100644
index 000000000..0ddb427e2
Binary files /dev/null and b/src/assets/image/topology/topology_bg.png differ
diff --git a/src/assets/image/topology/ypkj.png b/src/assets/image/topology/ypkj.png
new file mode 100644
index 000000000..896f1b598
Binary files /dev/null and b/src/assets/image/topology/ypkj.png differ
diff --git a/src/router/index.ts b/src/router/index.ts
index c0a0d516c..e462211a6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -46,6 +46,11 @@ const router = createRouter({
       name: 'Test',
       component: () => import('@/views/Test/index.vue'),
     },
+    {
+      path: '/TopologyMap',
+      name: 'TopologyMap',
+      component: () => import('@/views/TopologyMap/index.vue'),
+    },
   ],
 })
 
diff --git a/src/views/TopologyMap/components/dialogNode.vue b/src/views/TopologyMap/components/dialogNode.vue
new file mode 100644
index 000000000..7660873a1
--- /dev/null
+++ b/src/views/TopologyMap/components/dialogNode.vue
@@ -0,0 +1,97 @@
+<template>
+    <div class="dialog" :style="{ width: width + 'px' }" v-if="id.indexOf('cpu') != -1">
+        <span class="arrow-bottom" :style="{ left: (width - 17) / 2 + 'px' }"></span>
+        <p>CPU：{{ cpu }}</p>
+        <p>内存：{{ neicun }}</p>
+        <p>硬盘：{{ yingpan }}</p>
+    </div>
+    <div class="dialog" :style="{ width: width + 'px' }" v-if="id.indexOf('yp2') != -1">
+        <span class="arrow-left" :style="{ top: (height - 17) / 2 + 'px' }"></span>
+        <p>数据：{{ shuju }}</p>
+        <p>CPU：{{ cpu }}</p>
+        <p>内存：{{ neicun }}</p>
+        <p>硬盘：{{ yingpan }}</p>
+    </div>
+    <div class="dialog" :style="{ width: width + 'px' }" v-if="id.indexOf('yp1') != -1">
+        <span class="arrow-bottom" :style="{ left: (width - 17) / 2 + 'px' }"></span>
+        <p>数据：{{ shuju }}</p>
+        <p>CPU：{{ cpu }}</p>
+        <p>内存：{{ neicun }}</p>
+        <p>硬盘：{{ yingpan }}</p>
+    </div>
+</template>
+
+<script lang='ts'>
+import { defineComponent, toRefs, reactive, onMounted } from 'vue'
+// import { useRoute, useRouter } from 'vue-router';
+export default defineComponent({
+    name: '',
+    inject: ['getNode'],
+    components: {},
+    setup() {
+        // const route = useRoute();
+        // const router = useRouter();
+        const state = reactive({
+            id: "",
+            "width": 70,
+            "height": 55,
+            "cpu": "80%",
+            "neicun": "70%",
+            "yingpan": "50%",
+            "shuju": "128G/520G"
+        })
+        const getNode: Function | undefined = inject('getNode');
+        onMounted(() => {
+            const node = getNode();
+            let info = node.getData();
+            if (node) {
+                console.log(info, 'info')
+                state.id = info.id;
+                state.width = info.width;
+                state.height = info.height;
+                state.shuju = info.shuju;
+                state.cpu = info.cpu;
+                state.neicun = info.neicun;
+                state.yingpan = info.yingpan;
+            }
+        })
+        return { ...toRefs(state) };
+    }
+});
+</script>
+<style scoped lang='scss'>
+.dialog {
+    background: #001232;
+    border: 0.4px solid rgba(22, 238, 243, 1);
+    box-shadow: inset 0px 0px 13px 0px rgba(22, 238, 243, 1);
+    border-radius: 4px 4px 4px 0px 0px 0px 4px;
+    border-radius: 4px;
+    position: relative;
+    padding: 3px 5px;
+    z-index: 999;
+
+    .arrow-bottom {
+        position: absolute;
+        display: inline-block;
+        width: 17px;
+        height: 8px;
+        bottom: -7px;
+        background: url("./images/topology/arrow-bottom.png") no-repeat;
+    }
+
+    .arrow-left {
+        position: absolute;
+        display: inline-block;
+        width: 8px;
+        height: 17px;
+        left: -7px;
+        background: url("./images/topology/arrow-left.png") no-repeat;
+    }
+
+    p {
+        color: #16EEF3;
+        font-size: 12px;
+        line-height: 16px;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/TopologyMap/index.vue b/src/views/TopologyMap/index.vue
new file mode 100644
index 000000000..0f76c7f27
--- /dev/null
+++ b/src/views/TopologyMap/index.vue
@@ -0,0 +1,886 @@
+<template>
+    <div class="topology-map">
+        <div class="top">
+            <div class="left"><span>互联网</span></div>
+            <div class="center"><span>办公网</span></div>
+            <div class="right"><span>高密网</span></div>
+        </div>
+        <div class="content">
+            <div id="container"></div>
+            <TeleportContainer />
+        </div>
+        <div class="bottom">
+            <div class="left">
+                <i class="triangle"></i>
+                <i class="rectangle"></i>
+                <div class="b-con">
+                    <div class="b-left yingpan">
+                        <span>硬盘空间</span>
+                    </div>
+                    <div class="b-right">
+                        <div class="box">
+                            <p class="text">服务器1</p>
+                            <p class="line"><i class="jd" :style="{ 'width': 127 / 1942 * 100 + '%' }"></i></p>
+                            <p class="text">1942T<span class="yy">已用127T</span></p>
+                        </div>
+                        <div class="box">
+                            <p class="text">服务器2</p>
+                            <p class="line"><i class="jd" :style="{ 'width': 127 / 1942 * 100 + '%' }"></i></p>
+                            <p class="text">1942T<span class="yy">已用127T</span></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="center">
+                <i class="triangle"></i>
+                <i class="rectangle"></i>
+                <div class="b-con">
+                    <div class="b-left neicun">
+                        <span>内存</span>
+                    </div>
+                    <div class="b-right">
+                        <div class="box">
+                            <p class="text">服务器1</p>
+                            <p class="line"><i class="jd" :style="{ 'width': 27 / 194 * 100 + '%' }"></i></p>
+                            <p class="text">194T<span class="yy">已用27T</span></p>
+                        </div>
+                        <div class="box">
+                            <p class="text">服务器2</p>
+                            <p class="line"><i class="jd" :style="{ 'width': 89 / 123 * 100 + '%' }"></i></p>
+                            <p class="text">123T<span class="yy">已用89T</span></p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="right">
+                <i class="triangle"></i>
+                <i class="rectangle"></i>
+                <div class="b-con">
+                    <div class="b-left cpu">
+                        <span>CPU</span>
+                    </div>
+                    <div class="b-right chart-box">
+                        <div ref="chart1Ref" class="chart"></div>
+                        <div ref="chart2Ref" class="chart"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang='ts'>
+import { defineComponent, toRefs, reactive, onMounted } from 'vue'
+import axios from 'axios'
+import DialogNode from './components/dialogNode.vue';
+import { Graph, Cell } from '@antv/x6'
+import { register, getTeleport } from '@antv/x6-vue-shape'
+import * as echarts from 'echarts';
+Graph.registerNode('elk-node',
+    {
+        inherit: 'rect',
+        markup: [
+            {
+                tagName: 'rect',
+                selector: 'body',
+            },
+        ],
+        attrs: {
+            body: {
+                fill: 'rgba(255,255,255,0.02)',
+                stroke: 'rgba(142,255,253,0.25)',
+                strokeWidth: 1,
+            }
+        },
+    },
+    true,
+)
+Graph.registerNode('rect-node',
+    {
+        inherit: 'rect',
+        attrs: {
+            body: {
+                fill: 'none',
+                stroke: 'none',
+                strokeWidth: 1,
+            },
+        },
+        tools: [
+            {
+                name: 'boundary',
+                args: {
+                    padding: 5,
+                    attrs: {
+                        fill: 'none',
+                        stroke: 'rgba(142,248,255,0.25)',
+                        strokeWidth: 1,
+                    },
+                },
+            },
+        ],
+    },
+    true,
+)
+Graph.registerNode('node-a',
+    {
+        width: 48,
+        height: 39,
+        inherit: 'rect',
+        markup: [
+            {
+                tagName: 'rect',
+                selector: 'body',
+            },
+            {
+                tagName: 'image',
+                selector: 'img',
+            },
+        ],
+        attrs: {
+            body: {
+                fill: 'rgba(255,255,255,0)',
+                strokeWidth: 0
+            },
+            img: {
+                'xlink:href': "./images/topology/a.png", // 设置图片路径
+                width: 48,
+                height: 39,
+            },
+        },
+    },
+    true,
+)
+Graph.registerNode('node-cpu',
+    {
+        inherit: 'rect',
+        markup: [
+            {
+                tagName: 'image',
+                selector: 'img',
+            },
+            // {
+            //     tagName: 'rect',
+            //     selector: 'bg',
+            // },
+            // {
+            //     tagName: 'text',
+            //     selector: 'label',
+            // },
+        ],
+        attrs: {
+            img: {
+                'xlink:href': "./images/topology/cpu.png", // 设置图片路径
+                width: 74,
+                height: 86,
+            },
+            // bg: {
+            //     stroke: '#5F95FF',
+            //     strokeWidth: 1,
+            //     fill: 'rgba(0,0,0,0.5)',
+            //     refWidth: -10,
+            //     refHeight: -20,
+            //     rx: 5,
+            //     ry: 5,
+            //     refX: 5,
+            //     refY: -80,
+            // },
+            // label: {
+            //     refX: 20,
+            //     refY: -70,
+            //     fontSize: 10,
+            //     fill: '#fff',
+            // },
+        },
+    },
+    true,
+)
+Graph.registerNode('node-fs',
+    {
+        inherit: 'rect',
+        markup: [
+            {
+                tagName: 'image',
+                selector: 'img',
+            },
+        ],
+        attrs: {
+            img: {
+                'xlink:href': "./images/topology/fs.png", // 设置图片路径
+                width: 48,
+                height: 86,
+            }
+        },
+    },
+    true,
+)
+Graph.registerNode('node-fwq',
+    {
+        inherit: 'rect',
+        markup: [
+            {
+                tagName: 'image',
+                selector: 'img',
+            },
+        ],
+        attrs: {
+            img: {
+                'xlink:href': "./images/topology/fwq.png", // 设置图片路径
+                width: 36,
+                height: 86,
+            },
+        },
+    },
+    true,
+)
+Graph.registerNode('node-yp',
+    {
+        inherit: 'rect',
+        markup: [
+            {
+                tagName: 'image',
+                selector: 'img',
+            },
+        ],
+        attrs: {
+            img: {
+                'xlink:href': "./images/topology/yp.png", // 设置图片路径
+                width: 48,
+                height: 86,
+            },
+        },
+    },
+    true,
+)
+Graph.registerNode('node-com',
+    {
+        inherit: 'rect',
+        markup: [
+            {
+                tagName: 'image',
+                selector: 'img',
+            },
+        ],
+        attrs: {
+            img: {
+                'xlink:href': "./images/topology/com.png", // 设置图片路径
+                width: 64,
+                height: 52,
+            },
+        },
+    },
+    true,
+)
+Graph.registerNode('node-zhuji',
+    {
+        inherit: 'rect',
+        markup: [
+            {
+                tagName: 'image',
+                selector: 'img',
+            },
+        ],
+        attrs: {
+            img: {
+                'xlink:href': "./images/topology/zhuji.png", // 设置图片路径
+                width: 53,
+                height: 81,
+            },
+        },
+    },
+    true,
+)
+Graph.registerNode('node-xinhao',
+    {
+        inherit: 'rect',
+        markup: [
+            {
+                tagName: 'rect',
+                selector: 'body',
+            },
+            {
+                tagName: 'image',
+                selector: 'img',
+            },
+        ],
+        attrs: {
+            body: {
+                fill: 'rgba(255,255,255,0)',
+                strokeWidth: 0,
+            },
+            img: {
+                'xlink:href': "./images/topology/xinhao.png", // 设置图片路径
+                width: 27,
+                height: 28,
+            },
+        },
+    },
+    true,
+)
+Graph.registerNode('node-hezi',
+    {
+        inherit: 'rect',
+        markup: [
+            {
+                tagName: 'rect',
+                selector: 'body',
+            },
+            {
+                tagName: 'image',
+                selector: 'img',
+            },
+        ],
+        attrs: {
+            body: {
+                fill: 'rgba(255,255,255,0)',
+                strokeWidth: 0
+            },
+            img: {
+                'xlink:href': "./images/topology/hezi.png", // 设置图片路径
+                width: 55,
+                height: 56,
+            },
+        },
+    },
+    true,
+)
+
+Graph.registerEdge('elk-edge',
+    {
+        inherit: 'edge',
+        markup: [
+            {
+                tagName: 'path',
+                selector: 'p1',
+            },
+            {
+                tagName: 'image',
+                selector: 'img',
+            },
+        ],
+        attrs: {
+            p1: {
+                connection: true,
+                fill: 'none',
+                stroke: '#16EEF3',
+                strokeWidth: 1,
+                targetMarker: {
+                    name: 'block',
+                    width: 6,
+                    height: 6,
+                },
+            },
+            img: {
+                'xlink:href': "./images/topology/duankai.png", // 设置图片路径
+                width: 16,
+                height: 16,
+                r: 10,
+                y: -8,
+                atConnectionRatio: 0.2,
+            },
+        },
+        // attrs: {
+        //     line: {
+        //         stroke: '#16EEF3',
+        //         strokeWidth: 1,
+        //         targetMarker: {
+        //             name: 'block',
+        //             width: 6,
+        //             height: 6,
+        //         },
+        //     },
+        // },
+        zIndex: 1,
+    },
+    true,
+)
+register({
+    shape: 'node-dialog',
+    component: DialogNode,
+    zIndex: 15,
+})
+
+interface Position {
+    x: number
+    y: number
+}
+
+let graph: Graph;
+const TeleportContainer = getTeleport()
+
+export default defineComponent({
+    name: '',
+    components: { TeleportContainer },
+    setup() {
+        // const route = useRoute();
+        // const router = useRouter();
+        // const elk = new ELK()
+        const portIdToNodeIdMap: Record<string, string> = {}
+        const cells: Cell[] = []
+        const chart1Ref = ref(null);
+        const chart2Ref = ref(null);
+        const state = reactive({
+            json: [],
+
+        })
+        onMounted(async () => {
+            graph = new Graph({
+                container: document.getElementById('container'),
+                width: 1795,
+                height: 700,
+                // background: {
+                //     color: 'rgba(255, 255, 255, 1)',
+                // },
+                router: { name: 'manhattan' },
+                connector: { name: 'rounded' },
+                // interacting: {
+                //     nodeMovable: false,
+                //     edgeMovable: false,
+                // },
+                translating: {
+                    restrict(view) {
+                        if (view) {
+                            const cell = view.cell
+                            if (cell.isNode()) {
+                                const parent = cell.getParent()
+                                if (parent) {
+                                    return parent.getBBox()
+                                }
+                            }
+                        }
+                        return null
+                    },
+                },
+            })
+            await getData().then(data => {
+                addChildren(data.children || [])
+                addEdges(data.edges || [])
+                graph.zoomTo(1)
+                // graph.centerContent()
+            })
+
+            getCharts();
+        })
+
+        const addChildren = (children, pos?: Position) => {
+            let leftParentNode = graph.addNode({
+                shape: 'elk-node',
+                id: "left",
+                label: "互联网",
+                "x": 0,
+                "y": 0,
+                size: {
+                    "width": 347,
+                    "height": 666,
+                },
+                zIndex: 1,
+            })
+            let centerParentNode = graph.addNode({
+                shape: 'elk-node',
+                id: "center",
+                label: "办公网",
+                "x": 366,
+                "y": 0,
+                size: {
+                    "width": 595,
+                    "height": 666,
+                },
+                zIndex: 1,
+            })
+            let rightParentNode = graph.addNode({
+                shape: 'elk-node',
+                id: "right",
+                label: "高密网",
+                "x": 981,
+                "y": 0,
+                size: {
+                    "width": 814,
+                    "height": 666,
+                },
+                zIndex: 1,
+            })
+            children.forEach((child) => {
+                const position = {
+                    x: (child.x || 0) + (pos ? pos.x : 0),
+                    y: (child.y || 0) + (pos ? pos.y : 0),
+                }
+                let label: string = ''
+                if (typeof child.labels === 'string') {
+                    label = child.labels
+                } else if (Array.isArray(child.labels) && child.labels[0]) {
+                    label = child.labels[0].text
+                }
+                let type = "elk-node"
+                if (child.type && child.type === 'a') {
+                    type = 'node-a'
+                } else if (child.type && child.type === 'cpu') {
+                    type = 'node-cpu'
+                } else if (child.type && child.type === 'fwq') {
+                    type = 'node-fwq'
+                } else if (child.type && child.type === 'yp') {
+                    type = 'node-yp'
+                } else if (child.type && child.type === 'com') {
+                    type = 'node-com'
+                } else if (child.type && child.type === 'rect') {
+                    type = 'rect-node'
+                } else if (child.type && child.type === 'zhuji') {
+                    type = 'node-zhuji'
+                } else if (child.type && child.type === 'xinhao') {
+                    type = 'node-xinhao'
+                } else if (child.type && child.type === 'hezi') {
+                    type = 'node-hezi'
+                }
+                const node = graph.addNode({
+                    shape: type,
+                    id: child.id,
+                    position,
+                    label,
+                    body: {
+                        width: child.width || 0,
+                        height: child.height || 0,
+                    },
+                    size: {
+                        width: child.width || 0,
+                        height: child.height || 0,
+                    },
+                    zIndex: 2,
+                })
+                if (child.infos) {
+                    console.log(child.infos)
+                    const dialog = graph.createNode({
+                        shape: 'node-dialog',
+                        data: {
+                            id: child.id,
+                            ...child.infos
+                        },
+                        x: child.infos.x || 0,
+                        y: child.infos.y || 0,
+                        zIndex: 3
+                    })
+                    node.addChild(dialog)
+                }
+                if (child.parentId === 'left') {
+                    leftParentNode.addChild(node)
+                } else if (child.parentId === 'center') {
+                    centerParentNode.addChild(node)
+                } else if (child.parentId === 'right') {
+                    rightParentNode.addChild(node)
+                }
+            })
+
+
+            cells.push(leftParentNode)
+            cells.push(centerParentNode)
+            cells.push(rightParentNode)
+        }
+        const addEdges = (edges) => {
+            edges.forEach((edge) => {
+                let edgeline = {}
+                let markup = []
+                if (edge.isTrue !== undefined && edge.isTrue === false) {
+                    markup = [
+                        {
+                            tagName: 'path',
+                            selector: 'p1',
+                        },
+                        {
+                            tagName: 'image',
+                            selector: 'img',
+                        },
+                    ]
+                } else {
+                    markup = [
+                        {
+                            tagName: 'path',
+                            selector: 'p1',
+                        }
+                    ]
+                }
+                if (edge.vertices) {
+                    edgeline = {
+                        shape: 'elk-edge',
+                        source: edge.sources,
+                        target: edge.targets,
+                        vertices: edge.vertices,
+                        markup: markup,
+                    }
+                } else {
+                    edgeline = {
+                        shape: 'elk-edge',
+                        source: edge.sources,
+                        target: edge.targets,
+                        router: {
+                            name: 'er',
+                            args: {
+                                offset: 'center'
+                            }
+                        },
+                        markup: markup,
+                    }
+                }
+                graph.addEdge(edgeline)
+            })
+        }
+
+        const getData = () => {
+            return axios.get("./json/topology.json").then(res => {
+                if (res.status === 200) {
+                    return Promise.resolve(res.data)
+                } else {
+                    console.log('获取TLE失败')
+                    return Promise.reject(res.statusText)
+                }
+            })
+        }
+
+        const getCharts = () => {
+            const chart1 = echarts.init(chart1Ref.value);
+            const chart2 = echarts.init(chart2Ref.value);
+            let option1 = getOption('服务器1', 46)
+            let option2 = getOption('服务器2', 23)
+
+            // 设置配置项并渲染图表
+            chart1.setOption(option1);
+            chart2.setOption(option2);
+        }
+        const getOption = (title, num) => {
+            // 配置项
+            const option = {
+                title: {
+                    text: title,
+                    left: 'center',
+                    textStyle:
+                    {
+                        color: "#fff",
+                        fontSize: 14
+                    }
+                },
+                series: [
+                    {
+                        type: 'pie',
+                        radius: ['45%', '60%'], // 内外半径，形成环形图
+                        center: ['50%', '60%'],
+                        data: [
+                            {// 背景部分
+                                value: 100 - num, name: '未完成值',
+                                itemStyle: { color: 'rgba(22, 238, 243,0.3)' },
+                                label: {
+                                    show: false,
+                                },
+                            },
+                            { // 值部分
+                                value: num, name: '完成值',
+                                itemStyle: { color: '#16EEF3' },
+                                label: {
+                                    show: true, // 不显示标签
+                                    position: 'center',
+                                    fontSize: 16,
+                                    formatter: '{d}%',
+                                    color: '#fff',
+                                },
+                            },
+                        ],
+                        labelLine: {
+                            show: false, // 不显示标签线
+                        },
+                        emphasis: {
+                            scale: false, // 禁用高亮放大效果
+                        },
+                    },
+                ],
+            };
+            return option;
+        }
+
+        return { ...toRefs(state), chart1Ref, chart2Ref };
+    }
+});
+</script>
+<style scoped lang='scss'>
+.topology-map {
+    height: 100%;
+    background-color: #082857;
+    overflow: auto;
+
+    .top {
+        width: 1795px;
+        display: flex;
+        padding-top: 52px;
+        margin: 0 auto 30px;
+
+        .left {
+            width: 347px;
+        }
+
+        .center {
+            width: 595px;
+            margin-left: 20px;
+        }
+
+        .right {
+            width: 814px;
+            margin-left: 20px;
+        }
+
+        .left,
+        .center,
+        .right {
+            text-align: center;
+
+            span {
+                display: inline-block;
+                width: 262px;
+                height: 32px;
+                text-align: center;
+                line-height: 32px;
+                color: #fff;
+                background: url("@/assets/image/topology/topology_bg.png") no-repeat center center;
+            }
+        }
+    }
+
+    .content {
+        display: block;
+        min-width: 1800px;
+        // height: 666px;
+        // margin: 0 auto;
+
+        #container {
+            margin: 0 auto;
+        }
+    }
+
+    .bottom {
+        display: flex;
+        justify-content: space-evenly;
+
+        .left,
+        .center,
+        .right {
+            width: 477px;
+            height: 160px;
+            // border-top: 4px solid rgba(22, 238, 243, 0.6);
+            // border-bottom: 4px solid rgba(22, 238, 243, 0.3);
+            position: relative;
+            overflow-y: hidden;
+
+            .b-con {
+                display: flex;
+
+                .b-left {
+                    width: 140px;
+                    height: 140px;
+
+                    span {
+                        font-size: 16px;
+                        color: #16EEF3;
+                        text-align: center;
+                        display: block;
+                        margin-top: 35px;
+                    }
+
+                    &.yingpan {
+                        background: url("@/assets/image/topology/ypkj.png") no-repeat center bottom;
+                    }
+
+                    &.neicun {
+                        background: url("@/assets/image/topology/neicun.png") no-repeat center bottom;
+                    }
+
+                    &.cpu {
+                        height: 135px;
+                        background: url("@/assets/image/topology/cpuicon.png") no-repeat center bottom;
+                    }
+                }
+
+                .b-right {
+                    flex: 1;
+                    margin-right: 40px;
+
+                    .box {
+                        margin-top: 17px;
+
+                        .text {
+                            font-size: 14px;
+                            line-height: 22px;
+                            color: #fff;
+
+                            .yy {
+                                color: #F5A623;
+                                margin-left: 10px;
+                            }
+                        }
+
+                        .line {
+                            display: block;
+                            height: 5px;
+                            background: rgba(22, 238, 243, 0.5);
+                            border-radius: 5px;
+                            margin: 2px 0;
+
+                            .jd {
+                                display: block;
+                                width: 0;
+                                height: 5px;
+                                background: #16EEF3;
+                                border-radius: 5px;
+                            }
+                        }
+                    }
+
+                    &.chart-box {
+                        display: flex;
+                        margin-top: 30px;
+
+                        .chart {
+                            width: 50%;
+                            height: 110px;
+                        }
+                    }
+                }
+            }
+        }
+
+        .triangle {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 100%;
+            height: 4px;
+            background: rgba(22, 238, 243, 0.6);
+        }
+
+        .triangle::after {
+            content: "";
+            position: absolute;
+            top: -4px;
+            right: 0;
+            width: 0;
+            height: 0;
+            border-right: 22px solid rgba(22, 238, 243, 1);
+            border-bottom: 22px solid transparent;
+        }
+
+        .rectangle {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 4px;
+            background-color: rgba(22, 238, 243, 1);
+        }
+
+        .rectangle:after {
+            content: "";
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 0;
+            height: 0;
+            border-top: 0 solid transparent;
+            border-right: 50px solid #149eb5;
+            border-bottom: 25px solid transparent;
+        }
+
+    }
+}
+</style>
\ No newline at end of file