|
@@ -1,13 +1,30 @@
|
|
|
<template>
|
|
|
<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>
|
|
|
+ </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>
|
|
|
- <button type="primary" size="small" class="btn" v-if="level === 2" @click="draw">返回上一级</button>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
import G6 from '@antv/g6';
|
|
|
import { getG6Options, getG6TreeOptions, getMockData, getMockData2, getMockData3 } from './g6';
|
|
|
-import { onMounted, ref } from 'vue';
|
|
|
+import { onMounted, ref, reactive } from 'vue';
|
|
|
+
|
|
|
+const form = reactive({
|
|
|
+ start: '',
|
|
|
+ end: '',
|
|
|
+})
|
|
|
+
|
|
|
+function search() {
|
|
|
+
|
|
|
+}
|
|
|
|
|
|
let graph = null
|
|
|
|
|
@@ -42,8 +59,8 @@ function draw() {
|
|
|
graph.render();
|
|
|
|
|
|
// 节点上的点击事件
|
|
|
- // graph.on('node:click', nodeClick);
|
|
|
- graph.on('node:click', nodeClick2);
|
|
|
+ graph.on('node:click', nodeClick);
|
|
|
+ // graph.on('node:click', nodeClick2);
|
|
|
}
|
|
|
|
|
|
|
|
@@ -67,10 +84,15 @@ function draw2() {
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
- .btn {
|
|
|
+ .search {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
- top: 0;
|
|
|
+ top: calc(6px - 4.5vh);
|
|
|
+ padding: 0 2vw;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
}
|
|
|
}
|
|
|
</style>
|