增加双击节点显示二级库表格，双击表格内容，根据表格表格内容重新绘图，搜索内容为空时绘制默认图，不为空时候根据搜索内容更新绘图

src/views/home/AllLink.vue

@@ -2,16 +2,17 @@
   <div class="chart-wrapper">
     <div class="search">
       <div class="flex">
-        <el-input size="small" v-model="form.start" style="width: 120px;margin-right: 6px;" placeholder="首节点"></el-input>
-        <el-input size="small" v-model="form.end" style="width: 120px;margin-right: 6px;" placeholder="末节点"></el-input>
-        <button class="el-button el-button--primary el-button--small" @click="search">搜索</button>
+        <el-input size="small" v-model="form.start" style="width: 200px;margin-right: 6px;" placeholder="Search"></el-input>
+        <!-- <el-input size="small" v-model="form.end" style="width: 120px;margin-right: 6px;" placeholder="末节点"></el-input> -->
+        <button class="el-button el-button--primary el-button--small" icon="Search" @click="search"><el-icon><Search></Search></el-icon></button>
+
       </div>
       <!-- <button class="el-button el-button--primary el-button--small" @click="search">返回上一级</button> -->
       <!-- <button type="primary" size="small" class="btn" v-if="level === 1" @click="draw">返回上一级</button> -->
     </div>
     <div class="chart" id="g6ChartWrapper"></div>
     <div class="table-wrapper">
-      <el-table :data="tableData" v-if="showTable" border size="small" style="width: 100%" height="128px" v-loading="loading">
+      <el-table :data="tableData" highlight-current-row @row-dblclick="rowDblclick" v-if="showTable" border size="small" style="width: 100%" height="128px" v-loading="loading">
         <el-table-column prop="ID" label="ID" align="center" wud />
         <el-table-column prop="USE_STATUS" label="USE_STATUS" align="center" />
         <el-table-column prop="OS_TYPE" label="OS_TYPE" align="center" />
@@ -35,9 +36,10 @@
 </template>
 <script setup>
 import G6 from '@antv/g6';
-import { getG6Options, getG6TreeOptions, getMockData, getMockData2, getMockData3 } from './g6';
+import { getG6Options, getAllData, getRandomData } from './g6';
 import { onMounted, ref, reactive } from 'vue';
 import { getTable } from '@/api/mock';
+import { Search } from '@element-plus/icons-vue';
 
 const form = reactive({
   start: '',
@@ -48,6 +50,8 @@ const showTable = ref(false)
 const loading = ref(false)
 const tableData = ref([])
 
+let num = 0
+
 function getTableData() {
   loading.value = true
   tableData.value = []
@@ -57,7 +61,17 @@ function getTableData() {
 }
 
 function search() {
-
+  if (form.start) {
+    num++
+    graph.clear();
+    // graph.destroy();
+    graph.data(getRandomData(num));
+    graph.render();
+    loadingTableData()
+  } else {
+    showTable.value = false
+    draw()
+  }
 }
 
 let graph = null
@@ -67,14 +81,34 @@ onMounted(() => {
   graph = new G6.Graph(getG6Options({
     container: 'g6ChartWrapper'
   }));
+
+  const container = document.getElementById('g6ChartWrapper')
+
+  window.onresize = () => {
+    if (!graph || graph.get('destroyed')) return
+    if (!container || !container.scrollWidth || !container.scrollHeight) return
+    graph.changeSize(container.scrollWidth, container.scrollHeight)
+  }
   draw()
 })
 
-function nodeClick(event) {
+
+function draw() {
+  graph.clear();
+  graph.data(getAllData());
+  graph.render();
+
+  // 节点上的点击事件
+  graph.on('node:dblclick', loadingTableData);
+  // graph.on('node:click', nodeClick2);
+}
+
+function loadingTableData() {
   // graph.off('node:click', nodeClick);
   showTable.value = true
   getTableData()
 }
+
 function nodeClick2(e) {
   if (e.target.get('name') === 'collapse-icon') {
     e.item.getModel().collapsed = !e.item.getModel().collapsed;
@@ -83,22 +117,8 @@ function nodeClick2(e) {
   }
 }
 
-function draw() {
-  level.value = 1
-  graph.data(getMockData3());
-  graph.render();
-
-  // 节点上的点击事件
-  graph.on('node:click', nodeClick);
-  // graph.on('node:click', nodeClick2);
-}
-
-function draw2() {
-  level.value = 2
-  graph.clear();
-  // graph.destroy();
-  graph.data(getMockData2());
-  graph.render();
+function rowDblclick(row) {
+  search()
 }
 
 </script>
@@ -128,6 +148,7 @@ function draw2() {
       --el-table-header-bg-color: #101220;
       --el-fill-color-light: #555;
       --el-mask-color: #555;
+      --el-table-current-row-bg-color: #555;
 
       tr {
         color: #fff;
@@ -141,6 +162,7 @@ function draw2() {
 
   .chart {
     flex: 1;
+    overflow: hidden;
     // height: calc(100% - 2vw);
   }
 

src/views/home/g6.js

@@ -153,12 +153,6 @@ export function getG6TreeOptions({ container = 'container' }) {
 //   });
 // });
 
-// window.onresize = () => {
-//   if (!graph || graph.get('destroyed')) return
-//   if (!container || !container.scrollWidth || !container.scrollHeight) return
-//   graph.changeSize(container.scrollWidth, container.scrollHeight)
-// }
-
 // Background Animation 节点动画
 G6.registerNode(
   'background-animate',
@@ -374,68 +368,11 @@ export function getMockData2() {
   }
 }
 
-const types = ['machine room', 'UPS', 'cabinet', 'switch', 'server', 'VM', 'app', 'db']
+// const types = ['machine room', 'UPS', 'cabinet', 'switch', 'server', 'VM', 'app', 'db']
 const nodeTree = [
   {
     id: '1',
     label: 'MR001\n广州',
-    type: 'image',
-    img: '/imgs/machine room.svg',
-    size: 40,
-    children: [
-      {
-        id: '2',
-        label: 'BSDC UPS\nBSDC-UPS01',
-        type: 'image',
-        img: '/imgs/UPS.svg',
-        size: 40,
-        children: [
-          {
-            id: '4',
-            label: 'IT Cabinet\nC01',
-            type: 'image',
-            size: 40,
-            img: '/imgs/cabinet.svg'
-          },
-          {
-            id: '5',
-            label: 'IT Cabinet\nC02',
-            type: 'image',
-            size: 40,
-            img: '/imgs/cabinet.svg'
-          }
-        ]
-      },
-      {
-        label: 'BSDC UPS\nBSDC-UPS02',
-        type: 'image',
-        id: '3',
-        size: 40,
-        img: '/imgs/UPS.svg',
-        children: [
-          {
-            id: '6',
-            label: 'IT Cabinet\nC03',
-            size: 40,
-            type: 'image',
-            img: '/imgs/cabinet.svg'
-          },
-          {
-            id: '7',
-            label: 'IT Cabinet\nC04',
-            size: 40,
-            type: 'image',
-            img: '/imgs/cabinet.svg'
-          }
-        ]
-      }
-    ]
-  }
-]
-const nodeTree2 = [
-  {
-    id: '1',
-    label: 'MR001\n广州',
     img: '/imgs/machine room.svg',
     children: [
       {
@@ -564,10 +501,107 @@ const nodeTree2 = [
     ]
   }
 ]
+const nodeTree2 = [
+  {
+    id: '1',
+    label: 'MR001\n广州',
+    img: '/imgs/machine room.svg',
+    children: [
+      {
+        id: '3',
+        label: 'BSDC UPS\nBSDC-UPS02',
+        img: '/imgs/UPS.svg',
+        children: [
+          {
+            id: '17',
+            label: 'Server\nSRV04',
+            img: '/imgs/server.svg',
+            children: [
+              {
+                id: '19',
+                label: 'VM\nVM02',
+                img: '/imgs/vm.svg',
+                type: 'background-animate',
+                info: '网络异常',
+                color: '#f00',
+                labelCfg: {
+                  style: {
+                    fill: '#f00'
+                  },
+                  position: 'bottom'
+                },
+                children: [
+                  {
+                    id: '23',
+                    label: 'DB\nDB02',
+                    img: '/imgs/db.svg',
+                    children: [
+                      {
+                        id: '20',
+                        label: 'App\nApp01',
+                        img: '/imgs/app.svg'
+                      },
+                      {
+                        id: '21',
+                        label: 'App\nApp02',
+                        img: '/imgs/app.svg'
+                      }
+                    ]
+                  },
+                  {
+                    id: '22',
+                    label: 'DB\nDB01',
+                    img: '/imgs/db.svg'
+                  }
+                ]
+              },
+              {
+                id: '18',
+                label: 'VM\nVM01',
+                img: '/imgs/vm.svg'
+              }
+            ]
+          }
+        ]
+      },
+      {
+        id: '2',
+        label: 'BSDC UPS\nBSDC-UPS01',
+        img: '/imgs/UPS.svg',
+        children: [
+          {
+            id: '5',
+            label: 'IT Cabinet\nC02',
+            img: '/imgs/cabinet.svg',
+            children: [
+              {
+                id: '9',
+                label: 'Switch\nSW02',
+                img: '/imgs/switch.svg',
+                children: [
+                  {
+                    id: '14',
+                    label: 'Server\nSRV01',
+                    img: '/imgs/server.svg'
+                  },
+                  {
+                    id: '15',
+                    label: 'Server\nSRV02',
+                    img: '/imgs/server.svg'
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+]
 
-export function getMockData3() {
+export function getAllData() {
   // return nodeTree2
-  const nodes = flattenObjectTree(nodeTree2)
+  const nodes = flattenObjectTree(nodeTree)
   // const edges = flattenObjectTree(nodeTree2)
   console.log(nodes)
   return {
@@ -576,6 +610,21 @@ export function getMockData3() {
   }
 }
 
+export function getRandomData(num) {
+  const level = num % 5
+  let nodesArr = JSON.parse(JSON.stringify(nodeTree2))
+
+  for (let i = 0; i < level; i++) {
+    nodesArr = nodesArr[0].children
+  }
+  const nodes = flattenObjectTree(nodesArr)
+  // const edges = flattenObjectTree(nodeTree2)
+  return {
+    nodes,
+    edges: nodes.filter((i) => i.source).map((i) => ({ source: i.source, target: i.target }))
+  }
+}
+
 // 将tree展平
 function flattenObjectTree(tree, parent = null) {
   let result = []