|
@@ -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);
|
|
|
}
|
|
|
|