|
@@ -10,18 +10,52 @@
|
|
<!-- <button type="primary" size="small" class="btn" v-if="level === 1" @click="draw">返回上一级</button> -->
|
|
<!-- <button type="primary" size="small" class="btn" v-if="level === 1" @click="draw">返回上一级</button> -->
|
|
</div>
|
|
</div>
|
|
<div class="chart" id="g6ChartWrapper"></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>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script setup>
|
|
<script setup>
|
|
import G6 from '@antv/g6';
|
|
import G6 from '@antv/g6';
|
|
import { getG6Options, getG6TreeOptions, getMockData, getMockData2, getMockData3 } from './g6';
|
|
import { getG6Options, getG6TreeOptions, getMockData, getMockData2, getMockData3 } from './g6';
|
|
import { onMounted, ref, reactive } from 'vue';
|
|
import { onMounted, ref, reactive } from 'vue';
|
|
|
|
+import { getTable } from '@/api/mock';
|
|
|
|
|
|
const form = reactive({
|
|
const form = reactive({
|
|
start: '',
|
|
start: '',
|
|
end: '',
|
|
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() {
|
|
function search() {
|
|
|
|
|
|
}
|
|
}
|
|
@@ -30,9 +64,6 @@ let graph = null
|
|
|
|
|
|
const level = ref(1)
|
|
const level = ref(1)
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
- // graph = new G6.TreeGraph(getG6TreeOptions({
|
|
|
|
- // container: 'g6ChartWrapper'
|
|
|
|
- // }));
|
|
|
|
graph = new G6.Graph(getG6Options({
|
|
graph = new G6.Graph(getG6Options({
|
|
container: 'g6ChartWrapper'
|
|
container: 'g6ChartWrapper'
|
|
}));
|
|
}));
|
|
@@ -40,10 +71,9 @@ onMounted(() => {
|
|
})
|
|
})
|
|
|
|
|
|
function nodeClick(event) {
|
|
function nodeClick(event) {
|
|
- graph.off('node:click', nodeClick);
|
|
|
|
- setTimeout(() => {
|
|
|
|
- draw2()
|
|
|
|
- }, 100);
|
|
|
|
|
|
+ // graph.off('node:click', nodeClick);
|
|
|
|
+ showTable.value = true
|
|
|
|
+ getTableData()
|
|
}
|
|
}
|
|
function nodeClick2(e) {
|
|
function nodeClick2(e) {
|
|
if (e.target.get('name') === 'collapse-icon') {
|
|
if (e.target.get('name') === 'collapse-icon') {
|
|
@@ -78,10 +108,20 @@ function draw2() {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+ // display: flex;
|
|
|
|
+ // justify-content: space-between;
|
|
|
|
+
|
|
|
|
+ .table-wrapper {
|
|
|
|
+ width: 97vw;
|
|
|
|
+ margin-left: 20px;
|
|
|
|
+ position: fixed;
|
|
|
|
+ left: 0;
|
|
|
|
+ bottom: 1.5vw;
|
|
|
|
+ }
|
|
|
|
|
|
.chart {
|
|
.chart {
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
|
|
+ flex: 1;
|
|
|
|
+ height: calc(100% - 2vw);
|
|
}
|
|
}
|
|
|
|
|
|
.search {
|
|
.search {
|