<template>
|
<div class="subpage_Box">
|
<My-bread :list="[
|
`${$t('dataManage.dataManage')}`,
|
`知识图谱`,
|
]"></My-bread>
|
<el-divider />
|
<div class="mainBox">
|
|
<div class="searchComp subpage_Div">
|
<el-form ref="ruleForm" :model="ruleForm" :inline="true">
|
<div class="flex_box">
|
<div style="margin-right: auto">
|
<el-form-item size="mini" :label="$t('dataManage.vmobj.keyword')" prop="name">
|
<el-input v-model="ruleForm.name" :placeholder="$t('shuJuGuanLi.lable1')" style="width:200px"><i
|
slot="suffix" class="el-icon-search" @click="submitForm('ruleForm')"
|
style="padding-right: 8px"></i></el-input>
|
</el-form-item>
|
</div>
|
<div>
|
<el-form-item>
|
<el-button icon="el-icon-refresh" type="info" size="mini">{{ $t('common.empty') }}
|
</el-button>
|
|
</el-form-item>
|
</div>
|
</div>
|
|
</el-form>
|
</div>
|
<div class="dividing-line"></div>
|
<div class="echartBox">
|
<div id="mynetwork" class="container">
|
|
</div>
|
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import MyBread from "../../components/MyBread.vue";
|
import {
|
|
} from "../../api/api";
|
import $ from 'jquery'
|
import { getToken } from '../../utils/auth';
|
import * as vis from 'vis';
|
|
export default {
|
name: "vis",
|
components: {
|
MyBread,
|
},
|
data() {
|
return {
|
nodes: null,
|
edges: null,
|
network: null,
|
ruleForm: {
|
|
}
|
};
|
},
|
watch: {
|
|
},
|
methods: {
|
setResizeStart() {
|
this.nodes = new vis.DataSet([
|
{ id: 1, label: 'Node 1' },
|
{ id: 2, label: 'Node 2' },
|
{ id: 3, label: 'Node 3' },
|
{ id: 4, label: 'Node 4' },
|
{ id: 5, label: 'Node 5' }
|
])
|
this.edges = new vis.DataSet([
|
{ from: 1, to: 3 },
|
{ from: 1, to: 2 },
|
{ from: 2, to: 4 },
|
{ from: 2, to: 5 }
|
])
|
this.globalTrace() // 页面初始化的时候调用方法
|
},
|
globalTrace() {
|
// 建立拓扑图
|
var container = document.querySelector('#mynetwork')
|
// 以vis格式提供数据
|
var data = {
|
nodes: this.nodes,
|
edges: this.edges
|
}
|
var options = { // 对vis的一些设置
|
autoResize: true,
|
manipulation: { //该属性表示能够编辑，出现编辑操做按钮
|
|
enabled: true
|
|
}
|
}
|
// 初始化你的网络
|
this.network = new vis.Network(container, data, options)
|
this.network.on('click', function (params) {
|
var nodeId = params.nodes[0];
|
if (nodeId) {
|
var selectedNode = this.body.data.nodes.get(nodeId); // 获取点击的节点对象
|
console.log("Selected Node: " + JSON.stringify(selectedNode));
|
console.log("Selected Node ID: " + selectedNode.id);
|
console.log("Selected Node Label: " + selectedNode.label);
|
// 输出或进行其他操作...
|
}
|
})
|
this.network.on("oncontext", function (params) {
|
params.event.preventDefault();
|
var nodeId = params.nodes[0];
|
console.log(nodeId)
|
|
|
|
|
})
|
},
|
},
|
mounted() {
|
this.setResizeStart();
|
|
|
|
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.subpage_Box {
|
//height: 96%;
|
width: 98%;
|
padding: 1%;
|
border-radius: 10px;
|
}
|
|
.mainBox {
|
padding-top: 10px;
|
width: 100%;
|
height: calc(100% - 75px);
|
|
.echartBox {
|
width: 100%;
|
height: calc(94% - 10px);
|
margin-top: 10px;
|
|
#mynetwork {
|
width: 100%;
|
height: 100%;
|
border: 1px solid lightgray;
|
}
|
|
|
}
|
|
|
}
|
</style>
|
