监控集成插件：X6

@@ -189,6 +189,12 @@ const routes = [{
         path: '/vue3/operationLog/userList',
         name: 'operationLogUserList',
         component: () => myImport('views/operationLog/userList')
+    },
+    //x6
+    {
+        path: '/vue3/x6/index',
+        name: 'operationLogUserList',
+        component: () => myImport('views/x6/index')
     }
 ];
 

+<div>
+     <div id="container" style="width: 600px; height: 400px"></div>
+</div>

+import('../../../public/lib/x6/x6.js');
+export default {
+    name: "x6Index",
+    template: "",
+    setup() {
+
+        const init = () => {
+            if (window.X6 == undefined) {
+                setTimeout(function () {
+                    init();
+                }, 1000)
+                return;
+            }
+            const {Graph} = window.X6
+            // 创建 Graph 的实例
+            const graph = new window.X6.Graph({
+                container: document.getElementById('container'),
+                grid: true
+            })
+
+            // 渲染源节点
+            const source = graph.addNode({
+                x: 300,
+                y: 40,
+                width: 80,
+                height: 40,
+                label: 'Hello',
+            })
+
+            // 渲染目标节点
+            const target = graph.addNode({
+                x: 420,
+                y: 180,
+                width: 80,
+                height: 40,
+                label: 'World',
+            })
+
+            // 渲染边
+            graph.addEdge({
+                source,
+                target,
+            })
+        }
+
+        Vue.onMounted(() => {
+            init();
+        })
+    }
+}

@@ -290,6 +290,12 @@ const routes = [{
         path: '/vue3/operationLog/userList',
         name: 'operationLogUserList',
         component: () => myImport('views/operationLog/userList')
+    },
+    //x6
+    {
+        path: '/vue3/x6/index',
+        name: 'operationLogUserList',
+        component: () => myImport('views/x6/index')
     }
 ];