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.
1302 lines
36 KiB
1302 lines
36 KiB
<template>
|
|
<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="0" :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>
|
|
<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="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;
|
|
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="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">
|
|
<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>
|
|
</el-drawer>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import RelationGraph, { RGJsonData, RGOptions } from 'relation-graph-vue3';
|
|
import LayoutFactory from '@/assets/js/graphvis.layout.min.js'
|
|
import { config } from '@/assets/defaultConfig.js'
|
|
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, getpoinAll, getpoinByName} from "@/api/api/graph";
|
|
import { Picture } from "@element-plus/icons-vue";
|
|
import { selectAticleByRelation } from '@/api/api/article'
|
|
|
|
export default {
|
|
components: {
|
|
leftInfo,
|
|
HeaderInfo,
|
|
Picture,
|
|
RelationGraph
|
|
},
|
|
data() {
|
|
return {
|
|
getpoinName :"模糊综合评价方法",
|
|
testoptions: {
|
|
layout: {
|
|
layoutName: 'force',
|
|
animate: false, // 必须关闭动画
|
|
maxIterations: 50, // 仍控制在合理范围
|
|
fit: true,
|
|
padding: 80, // 增加画布边距，防止节点贴边
|
|
// --- 核心：放大两倍间距 ---
|
|
idealEdgeLength: 200, // 🔥 从 100 → 200（直接翻倍）
|
|
nodeRepulsion: 150000, // 🔥 大幅提升斥力，防止压缩
|
|
gravity: 0.05, // 🔽 极低引力，避免向中心聚集
|
|
stiffness: 200, // 保持边“硬”，防止拉伸变形
|
|
damping: 0.85, // 高阻尼抑制震荡
|
|
distanceMin: 30,
|
|
distanceMax: 600 // 允许更大空间
|
|
}
|
|
},
|
|
direction: "rtl",
|
|
// visGraph实例对象
|
|
visGraph: null,
|
|
visLayout: null,//布局对象
|
|
layoutLoopName: null,//布局循环对象
|
|
// visGraph可视化交互配置
|
|
config,
|
|
//示例数据
|
|
demoData,
|
|
circleBgImage: require('@/assets/images/circle.png'),//节点背景图片
|
|
// visGraph创建节点和连线数据集
|
|
graphData: {
|
|
nodes: [],
|
|
links: []
|
|
},
|
|
nodeList: [],
|
|
linkList: [],
|
|
graphLegend: [
|
|
//{type:'图例一',color:'rgb(233,120,120)',show:true}
|
|
],//图例数组，根据数据的节点类型生成
|
|
knowlegeInfo: {//图谱信息，需要服务端查询后赋值
|
|
name: '公司网络图谱',
|
|
tag: '公司',
|
|
desc: '某某公司图谱信息',
|
|
nodeNum: 7,
|
|
relationNum: 9,
|
|
permission: '私有'
|
|
},
|
|
properShow: false,//属性展示配置
|
|
tipLayer: { //提示层配置
|
|
show: false, //是否显示提示层
|
|
header: '提示信息', // 提示表头
|
|
data: [] //提示内部的数据
|
|
},
|
|
graphOptions: {
|
|
debug: false,
|
|
lineUseTextPath: true,
|
|
layout: {
|
|
layoutName: 'tree',
|
|
from: 'top',
|
|
levelDistance: 200, // 层与层之间的垂直间距
|
|
nodeDistance: 150, // 同一层级的水平间距
|
|
min_per_width: 120, // 最小水平间距（固定值）
|
|
max_per_width: 120, // 最大水平间距（固定值，强制均匀分布）
|
|
min_per_height: 300, // 最小垂直间距（固定值）
|
|
max_per_height: 300, // 最大垂直间距（固定值，强制对齐）
|
|
disableDrag: true, // 禁止拖动节点（可选）
|
|
align: 'center', // 居中排列
|
|
fixed: false, // 允许自动布局调整
|
|
},
|
|
defaultlineWidth: 2,
|
|
defaultLineShape: 1,
|
|
defaultNodeShape: 0,
|
|
defaultLineFontSize: 80,
|
|
defaultNodeBorderWidth: 0,
|
|
defaultLineColor: 'rgb(255,255,255)',
|
|
defaultNodeColor: 'rgba(0, 206, 209, 1)',
|
|
lineLengths: 100,
|
|
defaultNodeFontSize: '20px', // 全局默认字体大小
|
|
toolBarPositionH: 'right',
|
|
toolBarPositionV: 'top',
|
|
disableNodeClickEffect: true,
|
|
},
|
|
currentNode: {}, // 选中的节点对象
|
|
attrbutes: [],//选中节点或连线的属性列表
|
|
currentLink: {},// 选中的连线对象
|
|
//节点详细信息弹框
|
|
showNodeInfoDialog: false,
|
|
//关系连线信息弹层
|
|
showLinkInfoDialog: false,
|
|
//属性节点详细弹层控制开关
|
|
showProperNodeInfo: false,
|
|
properNode: {},//属性节点
|
|
currentLayoutType: 'frDirect',//当前布局类型，用于区分是否可以拖动
|
|
loading: true,
|
|
|
|
|
|
data: {
|
|
nodes: [],
|
|
links: []
|
|
},
|
|
data1: [],
|
|
defaultProps: {
|
|
children: 'level2',
|
|
label: 'docTitle',
|
|
level: 'titleLevel',
|
|
docLevel: 'docLevel',
|
|
},
|
|
names: ['0级', '一级', '二级', '三级', '四级', '五级', '六级'],
|
|
labels: ['0', '1', '2', '3', '4', '5', '6'],
|
|
linkTypes: ['info', 'type', 'locate', 'export'],
|
|
zhedie: 0,
|
|
isLoginShow: false,
|
|
jiedianType: 0,
|
|
totalNum: 0,
|
|
selectInfo: "",
|
|
viewerData: {
|
|
total: 25,
|
|
limit: 10,
|
|
skip: 0,
|
|
links: {
|
|
previous: undefined,
|
|
next: function () {
|
|
},
|
|
},
|
|
},
|
|
gg: [],
|
|
graphNodes: [],
|
|
graphEdges: [],
|
|
currentNodeId: '', //当期选中节点id
|
|
vertexData: '', //节点详细数据
|
|
full: false, //是否全屏,
|
|
simpleData: {},
|
|
keywords: '',
|
|
userNameInfo: '',
|
|
docList: [],
|
|
drawer: false,
|
|
tableData: [],
|
|
isDing: false,
|
|
|
|
// graphData:[],
|
|
nodes: [],
|
|
links: [],
|
|
|
|
width: 2000,
|
|
height: 1000,
|
|
svg: null,
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
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;
|
|
})
|
|
},
|
|
opending() {
|
|
if (this.isDing == true) {
|
|
this.isDing = !this.isDing;
|
|
} 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) {
|
|
const from = linkObject.fromNode.data.docId
|
|
const to = linkObject.toNode.data.docId
|
|
const data = {
|
|
sourceId: from,
|
|
targetId: to,
|
|
}
|
|
this.tableData = await selectAticleByRelation(data);
|
|
this.drawer = true;
|
|
console.log(this.tableData)
|
|
console.log(this.drawer)
|
|
},
|
|
//整理图谱数据
|
|
zhengl(data) {
|
|
const nodes = []
|
|
const links = []
|
|
const nodeList = data.nodes;
|
|
const lineList = data.links;
|
|
|
|
this.graphData = { nodes, links };
|
|
|
|
},
|
|
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
|
|
}
|
|
})
|
|
});
|
|
},
|
|
getColor(type){
|
|
let res = "rgb(227,203,0)"
|
|
if (type=="author"){
|
|
res = "rgb(255,203,0)"
|
|
}
|
|
if (type=="agency"){
|
|
res = "rgb(0,255,0)"
|
|
}
|
|
if (type=="keyword"){
|
|
res = "rgb(0,0,255)"
|
|
}
|
|
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
|
|
}
|
|
})
|
|
});
|
|
|
|
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()
|
|
|
|
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),
|
|
}
|
|
nodes.push(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,
|
|
}
|
|
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);
|
|
// })
|
|
|
|
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/*****页面主要布局样式定义******/
|
|
.graph-nav {
|
|
height: 80px;
|
|
background-color: #fff;
|
|
line-height: 26px;
|
|
font-size: 13px;
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.graph-area {
|
|
position: relative;
|
|
height: calc(100% - 105px);
|
|
padding: 0;
|
|
background-color: #fafafa;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
/******工具栏*******/
|
|
.toolbar {
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
background: #efefef;
|
|
}
|
|
|
|
.toolbar .toolbar-item {
|
|
width: 40px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
color: #888;
|
|
border-bottom: 1px solid #ddd;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toolbar .toolbar-item:hover {
|
|
color: deepskyblue;
|
|
}
|
|
|
|
/*******图例区域样式定义*****/
|
|
.legend-wrap {
|
|
position: absolute;
|
|
left: 10px;
|
|
bottom: 10px;
|
|
}
|
|
|
|
.legend-wrap>.legend-item {
|
|
height: 24px;
|
|
line-height: 24px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.legend-item>.item-dot {
|
|
float: left;
|
|
display: inline-block;
|
|
height: 20px;
|
|
width: 20px;
|
|
border-radius: 10px;
|
|
background-color: rgb(210, 210, 210);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.legend-item>.item-label {
|
|
display: inline-block;
|
|
float: left;
|
|
margin-left: 5px;
|
|
max-width: 120px;
|
|
}
|
|
|
|
/*****节点弹出鼠标提示层样式*****/
|
|
.tip-wrap {
|
|
position: absolute;
|
|
width: 350px;
|
|
height: auto;
|
|
min-height: 150px;
|
|
background: #fff;
|
|
box-shadow: 0px 0px 10px #999;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tip-wrap>.tip-header {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
padding: 5px 10px;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.tip-wrap>.tip-body {
|
|
padding: 0 10px 10px;
|
|
}
|
|
|
|
/*****右键菜单样式******/
|
|
.right-menu-layer {
|
|
position: absolute;
|
|
width: 100px;
|
|
z-index: 5;
|
|
display: none;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
background: #fafafa;
|
|
border: 1px solid #e1e2e2;
|
|
box-shadow: 0 0 5px #ddd;
|
|
padding: 5px 3px;
|
|
}
|
|
|
|
.right-menu-layer button {
|
|
display: block;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
background: transparent;
|
|
border: none;
|
|
color: #444;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.right-menu-layer button>i {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.right-menu-layer button:hover {
|
|
color: slateblue;
|
|
}
|
|
|
|
.right-menu-layer button:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
.box-card {
|
|
box-shadow: 0 0 3px #d4c8c8;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.gContainer {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 45vw;
|
|
}
|
|
|
|
.about {
|
|
width: 100%;
|
|
height: 100%;
|
|
/*background-image: url("../assets/img1/graphback.jpg");*/
|
|
/* 背景图垂直、水平均居中 */
|
|
background-position: center center;
|
|
/* 背景图不平铺 */
|
|
background-repeat: no-repeat;
|
|
/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
|
|
background-attachment: fixed;
|
|
/* 让背景图基于容器大小伸缩 */
|
|
background-size: cover;
|
|
/* 设置背景颜色，背景图加载过程中会显示背景色 */
|
|
}
|
|
|
|
|
|
.rightBox {
|
|
width: 100%;
|
|
height: 95%;
|
|
top: 5.35vw;
|
|
position: absolute;
|
|
background-color: #2d3562;
|
|
}
|
|
|
|
|
|
.graphGround {
|
|
width: 100%;
|
|
height: 100%;
|
|
/*background-color: #0AB7FD;*/
|
|
border-radius: 2vw;
|
|
}
|
|
|
|
.graphHeader {
|
|
/*float: left;*/
|
|
width: 95%;
|
|
height: 5%;
|
|
background-color: transparent;
|
|
margin-left: 6vw;
|
|
margin-top: 0.5vw;
|
|
/*border-radius: 2vw 2vw 0 0;*/
|
|
}
|
|
|
|
.graphHeader1 {
|
|
/*float: left;*/
|
|
width: 90%;
|
|
height: 5%;
|
|
background-color: transparent;
|
|
margin-left: 1.5vw;
|
|
margin-top: 0.5vw;
|
|
/*border-radius: 2vw 2vw 0 0;*/
|
|
}
|
|
|
|
.graphContent {
|
|
width: 100%;
|
|
height: 94%;
|
|
background: transparent;
|
|
/* border: 1px solid #04538e; */
|
|
position: relative;
|
|
margin-top: 0%;
|
|
}
|
|
|
|
|
|
.gjz {
|
|
width: 25%;
|
|
height: 2vw;
|
|
float: left;
|
|
margin-right: 20%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
|
|
}
|
|
|
|
.gjzText {
|
|
float: left;
|
|
font-size: 1vw;
|
|
height: 100%;
|
|
line-height: 2vw;
|
|
color: #ffffff;
|
|
font-family: '微软雅黑';
|
|
letter-spacing: 0.1vw;
|
|
}
|
|
|
|
.gjzInput {
|
|
width: 60%;
|
|
height: 1.6vw;
|
|
border-radius: 2vw;
|
|
border: #ffffff 1px solid;
|
|
background: transparent;
|
|
text-indent: 4px;
|
|
color: #ffffff;
|
|
font-size: 0.9vw;
|
|
margin: 0.2vw 0;
|
|
}
|
|
|
|
.jiedianInfo {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-left: 50%;
|
|
}
|
|
|
|
.jiedian {
|
|
width: 15vw;
|
|
height: 100%;
|
|
float: left;
|
|
margin-left: 26vw;
|
|
margin-right: 1vw;
|
|
}
|
|
|
|
.jiedian1 {
|
|
width: 15vw;
|
|
height: 100%;
|
|
float: left;
|
|
margin-left: 32vw;
|
|
margin-right: 1vw;
|
|
}
|
|
|
|
.jiedianText {
|
|
float: left;
|
|
font-size: 1.2vw;
|
|
color: #ffffff;
|
|
font-family: '微软雅黑';
|
|
margin-right: 8%;
|
|
letter-spacing: 0.1vw;
|
|
}
|
|
|
|
select {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.jiedianList {
|
|
width: 8vw;
|
|
height: 75%;
|
|
margin-top: 1.5%;
|
|
/*box-shadow: rgba(92, 228, 229, 0.31) 1px 1px 8px 0px;*/
|
|
border-radius: 2vw;
|
|
border: #ffffff 1px solid;
|
|
background: transparent;
|
|
outline: none;
|
|
/* 鼠标移上，变小手 */
|
|
cursor: pointer;
|
|
float: left;
|
|
/* 清除默认的箭头样式 */
|
|
}
|
|
|
|
.jiedianNum {
|
|
height: 1.5vw;
|
|
width: 30%;
|
|
margin-left: 1%;
|
|
border: none;
|
|
border-radius: 2vw;
|
|
background: rgba(255, 255, 255, 0.75);
|
|
text-indent: 2px;
|
|
}
|
|
|
|
/*.jiansuo {*/
|
|
/* width: 7%;*/
|
|
/* height: 80%;*/
|
|
/* line-height: 1.8vw;*/
|
|
/* background-color: transparent;*/
|
|
/* float: right;*/
|
|
/* margin-top: 0.2%;*/
|
|
/* margin-right: 1%;*/
|
|
/* border-radius: 2vw;*/
|
|
/* text-align: center;*/
|
|
/* color: #ffffff;*/
|
|
/* border: #ffffff 1px solid;*/
|
|
/* font-size: 1vw;*/
|
|
/*}*/
|
|
|
|
.custom-menu {
|
|
position: absolute;
|
|
padding: 5px 0px;
|
|
background-color: rgba(84, 92, 100, 0.8);
|
|
top: 100px;
|
|
left: 100px;
|
|
border-radius: 5px;
|
|
z-index: 1000;
|
|
display: none;
|
|
}
|
|
|
|
.icon1 {
|
|
margin-left: 45%;
|
|
;
|
|
cursor: pointer;
|
|
color: #ffffff;
|
|
width: 2vw;
|
|
height: 2vw;
|
|
font-size: 2vw;
|
|
}
|
|
|
|
.icon2 {
|
|
margin-left: 45%;
|
|
cursor: pointer;
|
|
font-size: 2px;
|
|
color: #ffffff;
|
|
width: 2vw;
|
|
height: 2vw;
|
|
font-size: 2vw;
|
|
}
|
|
|
|
.custom-menu div {
|
|
padding: 5px 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
.custom-menu div span {
|
|
font-family: '微软雅黑';
|
|
font-size: 12px;
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
.custom-menu div span:hover {
|
|
cursor: pointer;
|
|
color: orange;
|
|
}
|
|
|
|
.loadPng {
|
|
position: absolute;
|
|
right: 3vw;
|
|
top: 1vw;
|
|
z-index: 9999;
|
|
cursor: pointer;
|
|
font-size: 1.5vw;
|
|
color: #ffffff;
|
|
}
|
|
|
|
loadPng:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.screenPng {
|
|
position: absolute;
|
|
right: 1vw;
|
|
top: 2vh;
|
|
z-index: 9999;
|
|
cursor: pointer;
|
|
font-size: 1.5vw;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.screenPng:hover {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.show-box {
|
|
position: relative;
|
|
background: transparent;
|
|
/*border: 1px solid #04538e;*/
|
|
border-radius: 5px;
|
|
height: calc(100%);
|
|
/*border-radius: 0 0 2vw 2vw;*/
|
|
}
|
|
|
|
.full-screen {
|
|
position: fixed;
|
|
background: #2d3562;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.other {
|
|
width: 2vw;
|
|
height: 3vw;
|
|
z-index: 100;
|
|
bottom: 4vw;
|
|
position: absolute;
|
|
/*background-color: red;*/
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.rel-node-checked {
|
|
transition: background-color .2s ease, outline .2s ease, color .2s ease, -webkit-box-shadow .2s ease;
|
|
box-shadow: 0 0 20px 15px #C0FFF9FF !important;
|
|
}
|
|
|
|
|
|
|
|
.label {
|
|
font-size: 1vw;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
width: 12vw;
|
|
height: 2vw;
|
|
}
|
|
|
|
input::-webkit-input-placeholder {
|
|
color: #FFFFFF;
|
|
}
|
|
</style>
|
|
<style>
|
|
.rel-node-checked {
|
|
transition: background-color .2s ease, outline .2s ease, color .2s ease, -webkit-box-shadow .2s ease;
|
|
box-shadow: 0 0 20px 15px #C0FFF9FF !important;
|
|
}
|
|
|
|
.el-tree-node__content:hover {
|
|
background: rgba(255, 255, 255, 0.21);
|
|
font-weight: 550;
|
|
|
|
.lineInfo {
|
|
background: #0012ff !important;
|
|
}
|
|
}
|
|
|
|
.el-tree--highlight-current {
|
|
.el-tree-node.is-current>.el-tree-node__content {
|
|
background-color: rgba(255, 255, 255, 0.21);
|
|
color: #fff;
|
|
|
|
.lineInfo {
|
|
background: #0012ff !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.el-tree-node__content {
|
|
color: #ffffff;
|
|
height: 2vw !important;
|
|
padding-left: 2vw !important;
|
|
padding-right: 2vw !important;
|
|
|
|
}
|
|
|
|
.el-tree-node {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.el-tree-node__children {
|
|
overflow: visible !important
|
|
}
|
|
|
|
.el-tree-node__expand-icon {
|
|
position: absolute !important;
|
|
right: 10% !important;
|
|
width: 1vw;
|
|
height: 1vw;
|
|
}
|
|
|
|
.el-tree-node is-expanded is-focusable .el-tree-node__label {
|
|
padding-left: 15px !important;
|
|
}
|
|
|
|
.el-tree-node__expand-icon {
|
|
margin-top: 5px;
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.el-tree-node__expand-icon.is-leaf {
|
|
display: none;
|
|
}
|
|
|
|
/* 三角图标 展开 */
|
|
.el-tree-node__expand-icon.expanded {
|
|
-webkit-transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.label {
|
|
font-size: 1vw;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
width: 12vw;
|
|
height: 2vw;
|
|
}
|
|
|
|
input::-webkit-input-placeholder {
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
/* .gContainer :deep(.relation-graph) :deep(.rel-map) {
|
|
background-color: #2d3562 !important;
|
|
} */
|
|
|
|
.gContainer .relation-graph .rel-map,
|
|
.relation-graph .rel-map,
|
|
.rel-map {
|
|
background-color: #2d3562 !important;
|
|
}
|
|
|
|
.el-drawer__title {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 90%;
|
|
color: #fff;
|
|
}
|
|
|
|
.el-drawer__close-btn {
|
|
width: 1.5vw;
|
|
}
|
|
|
|
.el-drawer__header {
|
|
display: flex;
|
|
}
|
|
|
|
.el-table__header {
|
|
width: 100%;
|
|
}
|
|
|
|
td{
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
tr {
|
|
margin-bottom: 2vh;
|
|
}
|
|
.el-tree--highlight-current {
|
|
background: no-repeat;
|
|
}
|
|
</style>
|
|
|