You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
377 lines
12 KiB
377 lines
12 KiB
<template>
|
|
<div style="width: 100%;height: 100%;">
|
|
<div style="width: 100%;height: 4vw;background-color: #42b983;">
|
|
<div style="background-color: silver;width: 3vw;height: 2vw;line-height: 2vw;text-align: center;" @click="goBook">跳转1</div>
|
|
<div class="stText">关键字:</div>
|
|
<input class="stInput" placeholder="请输入关键字" v-model="keywords"/>
|
|
<div @click="getInfo"
|
|
style="width: 4vw;height: 2vw;margin-left:0.2vw;background-color: #0AB7FD;float: right;font-size: 1vw;line-height: 2vw;text-align: center;border-radius:2vw;margin-top: 0.1vw;">
|
|
查询
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;height: 80%;">
|
|
<div class="gContainer">
|
|
<div id="graph-panel" style="width: 100%;height: 100%;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 弹窗 -->
|
|
<el-dialog
|
|
:visible.sync="isModalVisible"
|
|
title="添加分支内容"
|
|
width="30%"
|
|
top="15vh"
|
|
append-to-body
|
|
custom-class="custom-dialog"
|
|
>
|
|
<el-form label-width="80px">
|
|
<el-form-item label="fileId">
|
|
<el-input v-model="newBranchFileId"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="类型">
|
|
<el-select v-model="typeValue" placeholder="请选择类型">
|
|
<el-option label="图文" value="图文"></el-option>
|
|
<el-option label="视频" value="视频"></el-option>
|
|
<el-option label="动画" value="动画"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="节点名称">
|
|
<el-input v-model="newBranchContent"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="节点内容">
|
|
<el-input type="textarea" v-model="newBranchValue"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="父级节点ID">
|
|
<el-input v-model="newBranchParentId" disabled></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="关系">
|
|
<el-input v-model="newBranchRelation"
|
|
@input="newBranchRelation = $event.target.value.replace(/[^a-zA-Z\u4e00-\u9fa5]/g, '')"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="层级">
|
|
<el-input-number v-model="newBranchLevel" controls-position="right" :min="1"></el-input-number>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="closeModal">取 消</el-button>
|
|
<el-button type="primary" @click="addNewBranch">提 交</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
import {getgraphInfo, test} from "@/api/login";
|
|
import VisGraph from '@/assets/js/graphvis.min.20241008.js'
|
|
import LayoutFactory from '@/assets/js/graphvis.layout.min.js'
|
|
import {config} from '@/assets/defaultConfig.js'
|
|
import {addNode, getFileIdByDocId} from "@/api/file";
|
|
|
|
export default {
|
|
// eslint-disable-next-line vue/multi-word-component-names
|
|
name: 'Graph',
|
|
data() {
|
|
return{
|
|
infos:[],
|
|
demoData:{},
|
|
graphData: {
|
|
nodes: [],
|
|
links: []
|
|
},
|
|
config,
|
|
visGraph: null, // 组件中保存VisGraph实例
|
|
isModalVisible: false,
|
|
newBranchContent: '',
|
|
selectedNode: null,
|
|
|
|
newBranchValue: '',
|
|
newBranchFileId: '',
|
|
newBranchLevel: null,
|
|
newBranchParentId: '',
|
|
newBranchRelation:'',
|
|
typeValue: '',
|
|
keywords: '',
|
|
}
|
|
},
|
|
methods:{
|
|
goBook(){
|
|
this.$router.push({name:'Book',query: {id:'1'}})
|
|
},
|
|
onCreated(editor) {
|
|
this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
|
|
},
|
|
// getInfo(){
|
|
// var data = {}
|
|
// getgraphInfo(data).then((res)=>{
|
|
// this.zhengl(res.data);
|
|
//
|
|
// })
|
|
// },
|
|
getInfo() {
|
|
|
|
this.data = undefined;
|
|
if (this.keywords != '' && this.keywords != undefined) {
|
|
this.visGraph.clearAll();
|
|
let params = {
|
|
nodename: this.keywords,
|
|
};
|
|
getgraphInfo(params).then((res) => {
|
|
this.zhengl(res.data);
|
|
})
|
|
} else {
|
|
|
|
let params = {};
|
|
|
|
getgraphInfo(params).then((res) => {
|
|
this.zhengl(res.data);
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
async drawGraphData() {
|
|
this.graphData = this.demoData;
|
|
if (this.visGraph === null) {
|
|
this.createGraph();
|
|
// this.genrateGraphData();
|
|
this.visGraph.drawData(this.graphData);
|
|
// this.refreshGraphData();
|
|
this.visGraph.incremaNodesCodinate(this.graphData.nodes);
|
|
this.reLayout();
|
|
// this.goCenter();
|
|
} else {
|
|
this.createGraph();
|
|
|
|
this.visGraph.drawData(this.graphData);
|
|
// this.refreshGraphData();
|
|
this.visGraph.incremaNodesCodinate(this.graphData.nodes);
|
|
this.reLayout();
|
|
// this.goCenter();
|
|
}
|
|
this.loading = false;
|
|
|
|
},
|
|
// 创建全局绘图客户端对象
|
|
createGraph() {
|
|
const configWithEvents = {
|
|
...this.config,
|
|
node: {
|
|
...this.config.node,
|
|
ondblClick: (event, node) => {
|
|
this.showPopup(node);
|
|
}
|
|
}
|
|
};
|
|
this.visGraph = new VisGraph(document.getElementById('graph-panel'), configWithEvents);
|
|
},
|
|
async showPopup(node) {
|
|
console.log("o----------")
|
|
console.log(node)
|
|
this.selectedNode = node;
|
|
this.newBranchParentId = node.properties.docId;
|
|
this.newBranchLevel = parseInt(node.properties.level) + 1;
|
|
|
|
try {
|
|
const response = await this.getFileIdByDocId({ docId: node.properties.docId });
|
|
this.newBranchFileId = response.fileId;
|
|
} catch (error) {
|
|
console.error('Failed to fetch file ID:', error);
|
|
alert('无法获取文件ID，请稍后再试。');
|
|
return;
|
|
}
|
|
|
|
this.isModalVisible = true; // 显示模态框
|
|
},
|
|
getFileIdByDocId(data) {
|
|
return getFileIdByDocId(data);
|
|
},
|
|
closeModal() {
|
|
this.isModalVisible = false;
|
|
this.newBranchContent = '';
|
|
this.selectedNode = null;
|
|
},
|
|
async addNewBranch() {
|
|
const content = this.newBranchContent.trim();
|
|
const value = this.newBranchValue.trim();
|
|
const fileId = this.newBranchFileId.trim();
|
|
const relation = this.newBranchRelation.trim();
|
|
|
|
if (this.selectedNode && content && value) {
|
|
// 构造数据
|
|
const data = {
|
|
fileId: fileId,
|
|
txtName: content,
|
|
TxtValue: value,
|
|
relation: relation,
|
|
parentId: this.newBranchParentId,
|
|
level: this.newBranchLevel
|
|
};
|
|
|
|
try {
|
|
await addNode(data);
|
|
|
|
// 创建新节点
|
|
const newNodeId = Date.now().toString(); // 使用时间戳作为唯一ID
|
|
const newNode = {
|
|
id: newNodeId,
|
|
label: content,
|
|
properties: { name: content, docId: newNodeId, level: this.newBranchLevel },
|
|
...this.getNodeStyle(this.newBranchLevel) // 根据层级应用样式
|
|
};
|
|
const newLink = {
|
|
source: this.selectedNode.id,
|
|
target: newNodeId,
|
|
type: '',
|
|
};
|
|
this.graphData.nodes.push(newNode);
|
|
this.graphData.links.push(newLink);
|
|
|
|
// 刷新图谱
|
|
this.visGraph.drawData(this.graphData);
|
|
this.reLayout();
|
|
this.closeModal(); // 关闭模态框
|
|
} catch (error) {
|
|
console.error('Failed to add new branch:', error);
|
|
alert('Failed to add new branch. Please try again.');
|
|
}
|
|
}
|
|
},
|
|
// 执行布局算法
|
|
reLayout(alpha) {
|
|
var that = this;
|
|
if (alpha == null) {
|
|
that.visLayout = null;
|
|
that.visLayout = new LayoutFactory(this.visGraph.getGraphData()).createLayout('fastFR');
|
|
that.visLayout.resetConfig({
|
|
label: {
|
|
show: true
|
|
},
|
|
friction: 0.8,
|
|
linkDistance: 400,
|
|
linkStrength: 0.2,
|
|
charge: -1000,
|
|
gravity: 0.01,
|
|
noverlap: true,
|
|
size: [that.visGraph.stage.width, that.visGraph.stage.height]
|
|
});
|
|
} else {
|
|
that.visLayout.alpha += (alpha > 1 ? 0.2 : alpha); //继续运动
|
|
}
|
|
|
|
runLayout();//开始继续动画执行
|
|
|
|
//通过动画帧控制控制布局算法的执行，有动画效果
|
|
function runLayout() {
|
|
cancelAnimationFrame(that.layoutLoopName);//停止动画控制
|
|
that.visLayout.runLayout(); //运行布局算法
|
|
that.visGraph.refresh();
|
|
if (that.visLayout.alpha > 0.05) {
|
|
that.layoutLoopName = requestAnimationFrame(runLayout);
|
|
} else {
|
|
if (that.visGraph.currentNode && that.visGraph.currentNode.isDragging) {
|
|
that.visLayout.alpha = 0.1; //继续运动
|
|
that.layoutLoopName = requestAnimationFrame(runLayout);
|
|
} else {
|
|
that.visLayout.alpha = 0; //停止运动
|
|
cancelAnimationFrame(that.layoutLoopName);
|
|
}
|
|
}
|
|
}
|
|
|
|
// this.autoLayout();
|
|
},
|
|
zhengl(data) {
|
|
const nodes = []
|
|
const links = [] // 存放节点和关系
|
|
|
|
var nodeList = data.nodes;
|
|
var lineList = data.links;
|
|
var allOne = ""
|
|
|
|
console.log(nodeList)
|
|
if(nodeList!=undefined){
|
|
allOne = nodeList[0].docId
|
|
for (let a = 0; a < nodeList.length; a++) {
|
|
const group = parseInt(nodeList[a].group, 10);
|
|
const style = this.getNodeStyle(group);
|
|
|
|
nodes.push({
|
|
id: nodeList[a].id,
|
|
label: nodeList[a].name,
|
|
properties: { name: nodeList[a].name, docId: nodeList[a].docId, parent: allOne, leve: nodeList[a].group },
|
|
...style // 展开 style 对象以应用样式属性
|
|
});
|
|
}
|
|
}
|
|
|
|
// var allOne = nodeList[0].docId
|
|
|
|
|
|
if(lineList!=undefined){
|
|
for (let b = 0; b < lineList.length; b++) {
|
|
|
|
var bbb = {name: lineList[b].relate}
|
|
links.push({
|
|
source: lineList[b].source,
|
|
target: lineList[b].target,
|
|
type: lineList[b].relate,
|
|
properties: bbb,
|
|
color: '202,202,202',
|
|
lineWidth: 3,
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
this.demoData = {
|
|
"nodes": nodes,
|
|
"links": links
|
|
}
|
|
this.drawGraphData();
|
|
},
|
|
getNodeStyle(group) {
|
|
const styles = [
|
|
{ size: 450, color: '227,203,0', font: 'normal 70px Arial', fontColor: '255,255,255' },
|
|
{ size: 350, width: 350, height: 300, color: '47,47,230', font: 'normal 68px Arial', fontColor: '255,255,255' },
|
|
{ size: 300, width: 300, height: 250, color: '255,138,0', font: 'normal 50px Arial', fontColor: '255,255,255' },
|
|
{ size: 250, width: 250, height: 250, color: '30,255,0', font: 'normal 40px Arial', fontColor: '0,0,0' },
|
|
{ size: 200, width: 200, height: 200, color: '248,143,248', font: 'normal 32px Arial', fontColor: '255,255,255' },
|
|
{ size: 150, width: 150, height: 150, color: '65,154,255', font: 'normal 30px Arial', fontColor: '255,255,255' },
|
|
{ size: 100, width: 100, height: 100, color: '0,228,255', font: 'normal 28px Arial', fontColor: '0,0,0' }
|
|
];
|
|
|
|
return styles[group] || {};
|
|
},
|
|
// doLogin(){
|
|
// userLogin().then((res)=>{
|
|
// console.log(res);
|
|
// this.testInfo();
|
|
// this.getInfo();
|
|
// })
|
|
// },
|
|
testInfo(){
|
|
test().then((res)=>{
|
|
console.log(res);
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.doLogin();
|
|
this.getInfo();
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.gContainer {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 45vw;
|
|
}
|
|
</style>
|
|
|