|
|
|
@ -2,41 +2,22 @@ |
|
|
|
<div class="about"> |
|
|
|
<HeaderInfo style="height: 5.65vw;float: left;"></HeaderInfo> |
|
|
|
<leftInfo @show="isZhe" style="width: 5vw;position: absolute;top: 5.35vw;position: absolute;z-index:100;" |
|
|
|
:leftNum="3" :zhedie="zhedie" v-if="zhedie == 0"></leftInfo> |
|
|
|
<div v-if="zhedie == 0" @click="this.zhedie = 1" |
|
|
|
style="position: absolute;height: 3vw;width: 3vw;font-size: 2vw;border-radius: 0 50% 50% 0;z-index: 1000;bottom:45%;left:5vw;cursor: pointer"> |
|
|
|
<img src="../assets/img2/close3.png" style="width: 60%;object-fit: contain;"> |
|
|
|
</div> |
|
|
|
<div v-if="zhedie == 1" @click="this.zhedie = 0" |
|
|
|
style="position: absolute;height: 3vw;width: 3vw;font-size: 2vw;border-radius: 0 50% 50% 0;z-index: 1000;bottom:49%;left:0vw;cursor: pointer"> |
|
|
|
<img src="../assets/img2/open3.png" style="width: 60%;object-fit: contain;margin-top: 1.8vw;"> |
|
|
|
</div> |
|
|
|
:leftNum="3" :zhedie="zhedie"></leftInfo> |
|
|
|
<div class="rightBox"> |
|
|
|
<div class="graphGround"> |
|
|
|
<div class="graphHeader" v-if="zhedie == 0"> |
|
|
|
<div class="gjz"> |
|
|
|
<div class="gjzText">关键字:</div> |
|
|
|
<input class="gjzInput" placeholder="请输入关键字" v-model="keywords" /> |
|
|
|
<div @click="getInfo2" |
|
|
|
style="width: 4vw;height: 1.5vw;background-color: #0AB7FD;float: right;font-size: 1vw;line-height:1.5vw; height: 1.5vw;text-align: center;border-radius:2vw;margin-top: 0.25vw;cursor: pointer;"> |
|
|
|
查询 |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="graphHeader"> |
|
|
|
<!-- <div class="gjz">--> |
|
|
|
<!-- <div class="gjzText">关键字:</div>--> |
|
|
|
<!-- <input class="gjzInput" placeholder="请输入关键字" v-model="keywords" />--> |
|
|
|
<!-- <div @click="getInfo2"--> |
|
|
|
<!-- style="width: 4vw;height: 1.5vw;background-color: #0AB7FD;float: right;font-size: 1vw;line-height:1.5vw; height: 1.5vw;text-align: center;border-radius:2vw;margin-top: 0.25vw;cursor: pointer;">--> |
|
|
|
<!-- 查询--> |
|
|
|
<!-- </div>--> |
|
|
|
<!-- </div>--> |
|
|
|
<div class="jiedianInfo"> |
|
|
|
<!-- <div class="picList" style="height:10%;width:10%;margin-top: 0.1vw;margin-left: 41%;">--> |
|
|
|
<!-- <div @click="loadPng" class="icon1" title="导出图片">--> |
|
|
|
<!-- <el-icon>--> |
|
|
|
<!-- <Picture />--> |
|
|
|
<!-- </el-icon>--> |
|
|
|
<!-- </div>--> |
|
|
|
|
|
|
|
<!-- </div>--> |
|
|
|
<img src="../assets/img2/dingwei.png" |
|
|
|
style="width: 2vw;object-fit: contain;position: absolute;z-index: 2000;top: 1vw;right: 2vw;cursor: pointer;" |
|
|
|
@click="opending"> |
|
|
|
|
|
|
|
|
|
|
|
<div class="selectListInfo" v-if="isDing" |
|
|
|
style="z-index: 2000; |
|
|
|
max-height:35vw; |
|
|
|
@ -100,124 +81,27 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="graphHeader1" v-if="zhedie == 1"> |
|
|
|
<div class="gjz"> |
|
|
|
<div class="gjzText">关键字:</div> |
|
|
|
|
|
|
|
<input class="gjzInput" placeholder="请输入关键字" v-model="keywords" @blur="getInfo2" /> |
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="jiedianInfo"> |
|
|
|
<!-- <div class="picList" style="float: left;height:100%;width:10%;margin-top: 0.2vw;margin-left: 51.5%;">--> |
|
|
|
<!-- <div @click="loadPng" class="icon2" title="导出图片">--> |
|
|
|
<!-- <i>--> |
|
|
|
<!-- <el-icon>--> |
|
|
|
<!-- <Picture />--> |
|
|
|
<!-- </el-icon>--> |
|
|
|
<!-- </i>--> |
|
|
|
<!-- </div>--> |
|
|
|
|
|
|
|
<!-- </div>--> |
|
|
|
<img src="../assets/img2/dingwei.png" |
|
|
|
style="width: 2vw;object-fit: contain;position: absolute;z-index: 2000;top: 1vw;right: 2vw;cursor: pointer;" |
|
|
|
@click="opending"> |
|
|
|
|
|
|
|
|
|
|
|
<div class="selectListInfo" v-if="isDing" |
|
|
|
style="z-index: 2000; |
|
|
|
max-height:35vw; |
|
|
|
border-radius: 1vw; |
|
|
|
background-color: rgba(76,100,233,0.71) ;position:absolute;right: 4vw;top: 2vw;font-size: 0.9vw;overflow-y: scroll;margin-left: 1vw;margin-right: 1vw;"> |
|
|
|
<div |
|
|
|
style="font-size: 1.1vw;color: #ffffff;width:130%;background-color: rgba(32,51,162,0.71) ; |
|
|
|
text-align: center;height: 2.2vw;line-height: 2vw;margin-left: -13%;padding-top: 2%;letter-spacing: 3px;"> |
|
|
|
图谱快速定位 |
|
|
|
</div> |
|
|
|
<el-tree :data="this.data1" :props="defaultProps" class="flow-tree" accordion @node-click="goCenter" |
|
|
|
style="padding: 1.2vw 0;" node-key="id" ref="tree" highlight-current> |
|
|
|
<template #default="{ node }"> |
|
|
|
<span class="custom-tree-node" style="display: flex;flex-direction: row;" v-if="node.level == 1"> |
|
|
|
<div class="lineInfo" style="width: 0.2vw;height: 0.8vw; box-shadow: #FFFFFF 0px 0px 4px 1px; |
|
|
|
background: rgb(255, 255, 255);display: inline-block; |
|
|
|
margin-top: 0.6vw;margin-right: 0.5vw;"></div> |
|
|
|
<div class="label" style="font-size: 1.1vw;cursor: pointer;line-height: 2vw;">{{ node.label }}</div> |
|
|
|
</span> |
|
|
|
<span class="custom-tree-node" v-if="node.level == 2" style="border-top: none !important;"> |
|
|
|
<div class="lineInfo" |
|
|
|
style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;"> |
|
|
|
</div> |
|
|
|
<div class="label" |
|
|
|
style="font-size: 1vw;cursor: pointer;margin-left: 0.5vw;color: rgb(236,236,236);line-height: 2vw;"> |
|
|
|
{{ node.label }}</div> |
|
|
|
</span> |
|
|
|
<span class="custom-tree-node" v-if="node.level == 3"> |
|
|
|
<div class="lineInfo" |
|
|
|
style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;"> |
|
|
|
</div> |
|
|
|
<div class="label" |
|
|
|
style="font-size: 0.9vw;cursor: pointer;margin-left: 1vw;color: rgb(236,236,236);line-height: 2vw;"> |
|
|
|
{{ node.label }}</div> |
|
|
|
</span> |
|
|
|
<span class="custom-tree-node" v-if="node.level == 4"> |
|
|
|
<div class="lineInfo" |
|
|
|
style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;"> |
|
|
|
</div> |
|
|
|
<div class="label" |
|
|
|
style="font-size: 0.8vw;cursor: pointer;margin-left: 1.5vw;color: rgb(236,236,236);line-height: 2vw;"> |
|
|
|
{{ node.label }}</div> |
|
|
|
</span> |
|
|
|
<span class="custom-tree-node" v-if="node.level == 5"> |
|
|
|
<div class="lineInfo" |
|
|
|
style="width: 0.15vw;height: 2vw; background: rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;"> |
|
|
|
</div> |
|
|
|
<div class="label" |
|
|
|
style="font-size: 0.7vw;cursor: pointer;margin-left: 2vw;color: rgb(236,236,236);line-height: 2vw;"> |
|
|
|
{{ node.label }}</div> |
|
|
|
</span> |
|
|
|
<span class="custom-tree-node" v-if="node.level == 6"> |
|
|
|
<div class="lineInfo" |
|
|
|
style="width: 0.15vw;height: 2vw; rgba(255,255,255,0.26);display: inline-block;margin-right: 0.8vw;margin-left: 0.2vw;"> |
|
|
|
</div> |
|
|
|
<div class="label" style="font-size: 0.6vw;cursor: pointer;margin-left: 2.5vw;line-height: 2vw;">{{ |
|
|
|
node.label }}</div> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</el-tree> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
<div class="graphContent"> |
|
|
|
<div :class="full ? 'full-screen' : 'show-box'"> |
|
|
|
<div style="width: 100%;height: 100%;"> |
|
|
|
<div class="gContainer"> |
|
|
|
<!-- {{graphData.nodes}}--> |
|
|
|
<!-- <RelationGraph ref="graphRef" :options="graphOptions" :nodes="graphData.nodes" :links="graphData.links"--> |
|
|
|
<!-- :on-node-click="onNodeClick" :on-line-click="onLineClick" />--> |
|
|
|
<RelationGraph ref="graphRef" :options="testoptions" :on-node-click="onNodeClick" :on-line-click="onLineClick"/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div style="background-color: transparent;height: 20%;width: 40%;position: absolute;top: 1vw;right: 0;"></div> |
|
|
|
|
|
|
|
<el-drawer v-model="drawer" title="相关文档" direction="rtl" size="30%" :modal="false" :wrapperClosable="false" |
|
|
|
:append-to-body="true" @opened="onDrawerOpened" @closed="onDrawerClosed" |
|
|
|
style="position: fixed;right: 0;background-color: rgba(76, 100, 233, 0.71);top: 5.35vw;height: 91%;color: #fff"> |
|
|
|
:append-to-body="true" style="position: fixed;right: 0;background-color: rgba(76, 100, 233, 0.71);top: 5.35vw;height: 91%;color: #fff"> |
|
|
|
<el-table :data="tableData" style="width: 95%;margin-left: 2.5%;height: 97%; background: transparent;" v-if="drawer"> |
|
|
|
<el-table-column prop="name" label="文档名称" style="padding-bottom: 2vh;" /> |
|
|
|
<el-table-column prop="title" label="文档名称" style="padding-bottom: 2vh;"> |
|
|
|
<template #default="scope"> |
|
|
|
{{scope.row.title}} |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
</el-drawer> |
|
|
|
</div> |
|
|
|
@ -236,7 +120,7 @@ import { demoData } from '@/assets/demo2.js' |
|
|
|
import HeaderInfo from "@/components/UseAll/headerInfo.vue"; |
|
|
|
import leftInfo from "@/components/UseAll/leftInfo.vue"; |
|
|
|
import { getAllTitle, getDocInfo } from "@/api/api/doc"; |
|
|
|
import {getDomainGraphTest, getKeyWorlds, getpoinAll, getpoinByName} from "@/api/api/graph"; |
|
|
|
import {getDocInfoBylinkIds, getDomainGraphTest, getKeyWorlds, getpoinAll, getpoinByName} from "@/api/api/graph"; |
|
|
|
import { Picture } from "@element-plus/icons-vue"; |
|
|
|
import { selectAticleByRelation } from '@/api/api/article' |
|
|
|
|
|
|
|
@ -364,7 +248,25 @@ export default { |
|
|
|
nodes: [], |
|
|
|
links: [] |
|
|
|
}, |
|
|
|
data1: [], |
|
|
|
data1: [ |
|
|
|
{ |
|
|
|
docTitle: '模型', |
|
|
|
level:1, |
|
|
|
level2: [ |
|
|
|
{docTitle: '演化博弈推演决策模型'}, |
|
|
|
{docTitle: '模糊综合评价方法'}, |
|
|
|
{docTitle: '数据包络评估方法'}, |
|
|
|
{docTitle: '湿热指数计算方法'} |
|
|
|
] |
|
|
|
}, |
|
|
|
{ |
|
|
|
docTitle: '装备', |
|
|
|
level:1, |
|
|
|
level2: [ |
|
|
|
{docTitle: ''} |
|
|
|
] |
|
|
|
} |
|
|
|
], |
|
|
|
defaultProps: { |
|
|
|
children: 'level2', |
|
|
|
label: 'docTitle', |
|
|
|
@ -417,100 +319,11 @@ export default { |
|
|
|
handleNodeClick(node) { |
|
|
|
console.log(node); |
|
|
|
}, |
|
|
|
loadPng() { |
|
|
|
this.visGraph.saveImage(); |
|
|
|
}, |
|
|
|
// 获取所有的知识节点信息 |
|
|
|
async drawGraphData() { |
|
|
|
this.graphData = this.demoData; |
|
|
|
if (this.visGraph === null) { |
|
|
|
this.createGraph(); |
|
|
|
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() { |
|
|
|
this.visGraph = new VisGraph(document.getElementById('graph-panel'), this.config) |
|
|
|
}, |
|
|
|
async goCenter(node) { |
|
|
|
try { |
|
|
|
const docId = node.id.toString(); |
|
|
|
const graph = this.$refs.graphRef?.getInstance(); |
|
|
|
|
|
|
|
if (!graph) return; |
|
|
|
|
|
|
|
graph.getNodes().forEach(n => { |
|
|
|
n.selected = false; |
|
|
|
}); |
|
|
|
|
|
|
|
const targetNode = graph.getNodes().find(n => |
|
|
|
n.data?.docId === docId || n.id === docId |
|
|
|
); |
|
|
|
await graph.focusNodeById(targetNode.id); |
|
|
|
this.$nextTick(() => { |
|
|
|
this.$refs.tree?.setCurrentKey(node.id); |
|
|
|
}); |
|
|
|
} catch (error) { |
|
|
|
console.error('定位失败:', error); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 执行布局算法 |
|
|
|
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); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
getAll() { |
|
|
|
getAllTitle().then((res) => { |
|
|
|
this.data1 = res; |
|
|
|
}) |
|
|
|
goCenter(node) { |
|
|
|
if (node.level == 1) |
|
|
|
return |
|
|
|
this.getpoinName = node.docTitle |
|
|
|
this.getPointData() |
|
|
|
}, |
|
|
|
opending() { |
|
|
|
if (this.isDing == true) { |
|
|
|
@ -518,108 +331,22 @@ export default { |
|
|
|
} else { |
|
|
|
this.isDing = !this.isDing; |
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
isZhe(zhedie) { |
|
|
|
this.zhedie = zhedie; |
|
|
|
}, |
|
|
|
getInfoInit() { |
|
|
|
if (localStorage.getItem("userName") != null && localStorage.getItem("userName") != "") { |
|
|
|
this.userNameInfo = localStorage.getItem("userName"); |
|
|
|
} else { |
|
|
|
this.$router.push('/'); |
|
|
|
} |
|
|
|
}, |
|
|
|
logout() { |
|
|
|
const expirationDate = new Date(); |
|
|
|
expirationDate.setDate(expirationDate.getDate() - 1); |
|
|
|
document.cookie = 'satoken=; expires=${expirationDate.toUTCString()}'; |
|
|
|
localStorage.clear(); |
|
|
|
this.$router.push('/'); |
|
|
|
}, |
|
|
|
goChat() { |
|
|
|
this.$router.push('/intelligentQA'); |
|
|
|
}, |
|
|
|
goIndex() { |
|
|
|
this.$router.push('/'); |
|
|
|
}, |
|
|
|
goZc() { |
|
|
|
this.$router.push('/battlefield'); |
|
|
|
}, |
|
|
|
golist() { |
|
|
|
this.$router.push('/list'); |
|
|
|
}, |
|
|
|
goBack() { |
|
|
|
this.$router.go(-1) |
|
|
|
}, |
|
|
|
getInfo() { |
|
|
|
if (this.keywords) { |
|
|
|
let params = { nodename: this.keywords }; |
|
|
|
getDomainGraphTest(params).then((res) => { |
|
|
|
|
|
|
|
this.zhengl(res.data); |
|
|
|
}) |
|
|
|
} else { |
|
|
|
getDomainGraphTest({}).then((res) => { |
|
|
|
this.zhengl(res.data); |
|
|
|
console.log(res) |
|
|
|
console.log(this.graphData.nodes) |
|
|
|
console.log(this.graphData.links) |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
getInfo2() { |
|
|
|
// 1. 清空当前数据 |
|
|
|
this.data = undefined; |
|
|
|
|
|
|
|
// 2. 准备查询参数（有关键词时用关键词查询，否则查询全部） |
|
|
|
const params = this.keywords ? { nodename: this.keywords } : {}; |
|
|
|
|
|
|
|
// 3. 调用API获取数据 |
|
|
|
getDomainGraphTest(params) |
|
|
|
.then((res) => { |
|
|
|
// 4. 处理并渲染新数据 |
|
|
|
this.zhengl(res.data); |
|
|
|
}) |
|
|
|
.catch((error) => { |
|
|
|
console.error("数据加载失败:", error); |
|
|
|
// 可以在这里添加错误处理，比如显示提示信息 |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// }, |
|
|
|
async onLineClick(lineObject, linkObject, event) { |
|
|
|
console.log(linkObject.data) |
|
|
|
console.log(linkObject.relations[0].data) |
|
|
|
}, |
|
|
|
//整理图谱数据 |
|
|
|
zhengl(data) { |
|
|
|
const nodes = [] |
|
|
|
const links = [] |
|
|
|
const nodeList = data.nodes; |
|
|
|
const lineList = data.links; |
|
|
|
|
|
|
|
this.graphData = { nodes, links }; |
|
|
|
onLineClick(lineObject, linkObject, event) { |
|
|
|
getDocInfoBylinkIds(linkObject.relations[0].data.uuids).then((res)=>{ |
|
|
|
this.drawer = true |
|
|
|
this.tableData = res |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
onNodeClick(nodeObject, $event) { |
|
|
|
console.log(nodeObject) |
|
|
|
const data = { |
|
|
|
'id': nodeObject.data.docId, |
|
|
|
'docTitle': nodeObject.text, |
|
|
|
} |
|
|
|
getDocInfo(data).then((res) => { |
|
|
|
localStorage.setItem("docUrl", res.data.docUrl) |
|
|
|
this.$router.push({ |
|
|
|
name: 'docInfo', |
|
|
|
query: { |
|
|
|
title: res.data.docTitle, |
|
|
|
level: res.data.docLevel, |
|
|
|
keyword: res.data.docTitle, |
|
|
|
docId: res.data.id |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
this.$router.push({ |
|
|
|
name: 'pointInfo', // 对应路由中定义的 name |
|
|
|
params: { id: nodeObject.id } |
|
|
|
}) |
|
|
|
}, |
|
|
|
getColor(type){ |
|
|
|
let res = "rgb(227,203,0)" |
|
|
|
@ -634,118 +361,46 @@ export default { |
|
|
|
} |
|
|
|
return res |
|
|
|
}, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
var that = this; |
|
|
|
|
|
|
|
//节点的点击事件 |
|
|
|
this.config.node.onClick = function (event, node) { |
|
|
|
|
|
|
|
var data = { |
|
|
|
'id': node.properties.docId, |
|
|
|
'docTitle': node.properties.name, |
|
|
|
} |
|
|
|
getDocInfo(data).then((res) => { |
|
|
|
localStorage.setItem("docUrl", res.data.docUrl) |
|
|
|
that.$router.push({ |
|
|
|
name: 'docInfo', |
|
|
|
query: { |
|
|
|
title: res.data.docTitle, |
|
|
|
level: res.data.docLevel, |
|
|
|
keyword: res.data.docTitle, |
|
|
|
docId: res.data.id |
|
|
|
getPointData(){ |
|
|
|
getpoinByName(this.getpoinName).then((res) => { |
|
|
|
let nodes = [] |
|
|
|
let links = [] |
|
|
|
for (let i = 0;i<res.nodes.length;i++){ |
|
|
|
if (res.nodes[i].type=="keyword" && res.nodes[i].text!=this.getpoinName){ |
|
|
|
continue |
|
|
|
} |
|
|
|
}) |
|
|
|
}); |
|
|
|
|
|
|
|
node.color = 'rgb(' + node.fillColor + ')'; |
|
|
|
that.currentNode = node; |
|
|
|
that.tipLayer.header = node.label || ''; |
|
|
|
that.tipLayer.data = node.properties.attributes || []; //节点属性列表 |
|
|
|
that.attrbutes = node.properties.attributes || []; //节点属性列表 |
|
|
|
// that.showTipLayer(event); |
|
|
|
}; |
|
|
|
|
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
//初始化加载绘图 |
|
|
|
// this.getInfo(); |
|
|
|
// this.getAll(); |
|
|
|
// this.drawGraphData() |
|
|
|
|
|
|
|
getKeyWorlds().then((res)=>{ |
|
|
|
console.log(res) |
|
|
|
}) |
|
|
|
|
|
|
|
getpoinByName(this.getpoinName).then((res) => { |
|
|
|
let nodes = [] |
|
|
|
let links = [] |
|
|
|
for (let i = 0;i<res.nodes.length;i++){ |
|
|
|
if (res.nodes[i].type=="keyword" && res.nodes[i].text!=this.getpoinName){ |
|
|
|
continue |
|
|
|
} |
|
|
|
let t_data = { |
|
|
|
id:res.nodes[i].id, |
|
|
|
text:res.nodes[i].text, |
|
|
|
color:this.getColor(res.nodes[i].type), |
|
|
|
let t_data = { |
|
|
|
id:res.nodes[i].id, |
|
|
|
text:res.nodes[i].text, |
|
|
|
color:this.getColor(res.nodes[i].type), |
|
|
|
} |
|
|
|
nodes.push(t_data) |
|
|
|
} |
|
|
|
nodes.push(t_data) |
|
|
|
} |
|
|
|
// console.log(res.links) |
|
|
|
for (let i = 0;i<res.links.length;i++){ |
|
|
|
let t_data = { |
|
|
|
from:res.links[i].from, |
|
|
|
to:res.links[i].to, |
|
|
|
text:res.links[i].text, |
|
|
|
data:{ |
|
|
|
uuids:res.links[i].uuids, |
|
|
|
num:res.links[i].num |
|
|
|
// console.log(res.links) |
|
|
|
for (let i = 0;i<res.links.length;i++){ |
|
|
|
let t_data = { |
|
|
|
from:res.links[i].from, |
|
|
|
to:res.links[i].to, |
|
|
|
text:res.links[i].text, |
|
|
|
data:{ |
|
|
|
uuids:res.links[i].uuids, |
|
|
|
num:res.links[i].num |
|
|
|
} |
|
|
|
} |
|
|
|
console.log(t_data) |
|
|
|
links.push(t_data) |
|
|
|
} |
|
|
|
var data = { |
|
|
|
nodes:nodes, |
|
|
|
links:links |
|
|
|
} |
|
|
|
console.log(t_data) |
|
|
|
links.push(t_data) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var data = { |
|
|
|
nodes:nodes, |
|
|
|
links:links |
|
|
|
} |
|
|
|
|
|
|
|
this.$refs.graphRef.setJsonData(data); |
|
|
|
}) |
|
|
|
|
|
|
|
// getpoinAll().then((res) => { |
|
|
|
// for (let i = 0;i<res.nodes.length;i++){ |
|
|
|
// let t_data = { |
|
|
|
// id:res.nodes[i].id, |
|
|
|
// text:res.nodes[i].text, |
|
|
|
// color:this.getColor(res.nodes[i].type), |
|
|
|
// } |
|
|
|
// res.nodes[i] = t_data |
|
|
|
// } |
|
|
|
// for (let i = 0;i<res.links.length;i++){ |
|
|
|
// let t_data = { |
|
|
|
// from:res.links[i].from, |
|
|
|
// to:res.links[i].to, |
|
|
|
// text:res.links[i].text, |
|
|
|
// } |
|
|
|
// res.links[i] = t_data |
|
|
|
// } |
|
|
|
// |
|
|
|
// |
|
|
|
// |
|
|
|
// var data = { |
|
|
|
// nodes:res.nodes, |
|
|
|
// links:res.links |
|
|
|
// } |
|
|
|
// |
|
|
|
// this.$refs.graphRef.setJsonData(data); |
|
|
|
// }) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.$refs.graphRef.setJsonData(data); |
|
|
|
}) |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getPointData() |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
