diff --git a/kcui/src/view/TWInfo.vue b/kcui/src/view/TWInfo.vue index 4a23ff5..b34484d 100644 --- a/kcui/src/view/TWInfo.vue +++ b/kcui/src/view/TWInfo.vue @@ -69,7 +69,66 @@
-
+
+
关键字: + +
+ 查询 +
+
+
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 取 消 + 提 交 + + + + +
{{ item.id }}
{{ item.name }}
@@ -113,6 +172,11 @@ import headInfo from '@/components/Head.vue'; import Foot from "@/components/Foot.vue"; import {getDocList, getTwInfo} from "@/api/kcInfo"; +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 @@ -141,6 +205,26 @@ export default { totalPage: 0, pagesList: [], onePagesList: [], + + infos: [], + demoData: {}, + graphData: { + nodes: [], + links: [] + }, + config, + visGraph: null, // 组件中保存VisGraph实例 + isModalVisible: false, + newBranchContent: '', + selectedNode: null, + + newBranchValue: '', + newBranchFileId: '', + newBranchLevel: null, + newBranchParentId: '', + newBranchRelation: '', + typeValue: '', + keywords: '', } }, @@ -215,12 +299,277 @@ export default { console.log(res.data) }) + }, + + goBook() { + this.$router.push({name: 'Book', query: {id: '1'}}) + }, + onCreated(editor) { + this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错 + }, + getInfo() { + this.graphData = undefined; + this.demoData = {} + + 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); + }) + } + + + }, + getInfo1() { + this.graphData = undefined; + this.demoData = {} + + if (this.keywords != '' && this.keywords != undefined) { + this.visGraph.clearAll(); + let params = { + nodename: this.keywords, + }; + getgraphInfo(params).then((res) => { + this.zhengl(res.data); + }) + } else { + this.visGraph.clearAll(); + 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.visGraph.incremaNodesCodinate(this.graphData.nodes); + this.reLayout(); + } else { + this.createGraph(); + this.visGraph.drawData(this.graphData); + this.visGraph.incremaNodesCodinate(this.graphData.nodes); + this.reLayout(); + } + 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) { + 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: 120, width: 120, height: 120, color: '0,228,255', font: 'normal 28px Arial', fontColor: '0,0,0'} + ]; + + return styles[group] || {}; + }, + testInfo() { + test().then((res) => { + console.log(res); + }) } + }, mounted() { this.userType = localStorage.getItem("type"); this.userName = localStorage.getItem("name"); this.getContentList(); + this.getInfo(); } } @@ -326,6 +675,27 @@ export default { } +.tupu { + width: 100%; + height: 100%; + position: absolute; + z-index: 3; + top: 1%; + +} + +.gContainer { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + overflow: hidden; + width: 100%; + height: 32vw; + border-radius:2vw; +} + .oneRight { width: 98%; height: 5vw;