增加底部表格部分及表格数据模拟。点击节点更新表格数据

src/api/mock.js

@@ -5,7 +5,7 @@ export const Random = Mock.Random
 export function getData(data, loading) {
   loading && (loading.state = true)
   return new Promise((resolve) => {
-    const time = 500 + Math.random() * 2000
+    const time = 100 + Math.random() * 1000
     setTimeout(() => {
       loading && (loading.state = false)
       resolve(Mock.mock(data))
@@ -148,3 +148,24 @@ export function get_portal_list_mock({ pageSize = 5 }) {
   })
   return getData(data)
 }
+// 获取二级库表格信息
+export function getTable() {
+  const data = Mock.mock({
+    totalCount: '@integer(30,100)',
+    ['rows|' + 15]: [
+      {
+        ID: '@integer(1000,1100)',
+        USE_STATUS: 'offuse',
+        ASSET_STATUS: 'Offline',
+        OS_TYPE: 'Linux',
+        SERVER_NAME: '@title(1)',
+        IMPACT: '@title(4,5)',
+        SERVER_TYPE: 'Production',
+        Cn1_ip: '@ip',
+        Cn1_mac: '@ip',
+        BBA_BMW: 'BBA'
+      }
+    ]
+  })
+  return getData(data)
+}

src/views/home/AllLink.vue

@@ -10,18 +10,52 @@
       <!-- <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" v-if="showTable">
+      <el-table :data="tableData" border size="small" style="width: 100%" max-height="200px" 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" />
+        <el-table-column prop="SERVER_NAME" label="SERVER_NAME" align="center" />
+        <el-table-column prop="IMPACT" label="IMPACT" align="center" show-overflow-tooltip/>
+        <!-- <el-table-column prop="APPLICATION_DESCRIPTION" label="APPLICATION_DESCRIPTION" align="center" />
+        <el-table-column prop="APPLICATION_REMARK" label="APPLICATION_REMARK" align="center" /> -->
+        <el-table-column prop="SERVER_TYPE" label="SERVER_TYPE" align="center" />
+        <!-- <el-table-column prop="CRITICAL_LEVEL" label="CRITICAL_LEVEL" align="center" /> -->
+        <el-table-column prop="BBA_BMW" label="BBA_BMW" align="center" />
+        <el-table-column prop="ASSET_STATUS" label="ASSET_STATUS" align="center" />
+        <!-- <el-table-column prop="APPLICATION_ADMIN_ID" label="APPLICATION_ADMIN_ID" align="center" />
+        <el-table-column prop="BBA_OS_ADMIN_PHONE" label="BBA_OS_ADMIN_PHONE" align="center" />
+        <el-table-column prop="BBA_APPLICATION_OWNER_1" label="BBA_APPLICATION_OWNER_1" align="center" />
+        <el-table-column prop="BBA_APPLICATION_OWNER1_NAME" label="BBA_APPLICATION_OWNER1_NAME" align="center" /> -->
+        <el-table-column prop="Cn1_ip" label="Cn1_ip" align="center" />
+        <el-table-column prop="Cn1_mac" label="Cn1_mac" align="center" />
+      </el-table>
+    </div>
   </div>
 </template>
 <script setup>
 import G6 from '@antv/g6';
 import { getG6Options, getG6TreeOptions, getMockData, getMockData2, getMockData3 } from './g6';
 import { onMounted, ref, reactive } from 'vue';
+import { getTable } from '@/api/mock';
 
 const form = reactive({
   start: '',
   end: '',
 })
 
+const showTable = ref(false)
+const loading = ref(false)
+const tableData = ref([])
+
+function getTableData() {
+  loading.value = true
+  tableData.value = []
+  getTable().then(res => {
+    tableData.value = res.rows
+  }).finally(() => loading.value = false)
+}
+
 function search() {
 
 }
@@ -30,9 +64,6 @@ let graph = null
 
 const level = ref(1)
 onMounted(() => {
-  // graph = new G6.TreeGraph(getG6TreeOptions({
-  //   container: 'g6ChartWrapper'
-  // }));
   graph = new G6.Graph(getG6Options({
     container: 'g6ChartWrapper'
   }));
@@ -40,10 +71,9 @@ onMounted(() => {
 })
 
 function nodeClick(event) {
-  graph.off('node:click', nodeClick);
-  setTimeout(() => {
-    draw2()
-  }, 100);
+  // graph.off('node:click', nodeClick);
+  showTable.value = true
+  getTableData()
 }
 function nodeClick2(e) {
   if (e.target.get('name') === 'collapse-icon') {
@@ -78,10 +108,20 @@ function draw2() {
   width: 100%;
   height: 100%;
   position: relative;
+  // display: flex;
+  // justify-content: space-between;
+
+  .table-wrapper {
+    width: 97vw;
+    margin-left: 20px;
+    position: fixed;
+    left: 0;
+    bottom: 1.5vw;
+  }
 
   .chart {
-    width: 100%;
-    height: 100%;
+    flex: 1;
+    height: calc(100% - 2vw);
   }
 
   .search {

src/views/home/g6.js

@@ -63,6 +63,7 @@ export function getG6Options({ container = 'container' }) {
       size: 30,
       type: 'image',
       style: {
+        // opacity: 0.4
         // fill: '#f00',
         // stroke: '#000',
         // lineWidth: 1