<template>
|
<div class="subpage_Box">
|
<My-bread :list="[
|
`${$t('dataManage.dataManage')}`,
|
`知识图谱`,
|
]"></My-bread>
|
<el-divider />
|
<div class="mainBox">
|
<!-- <div class="dividing-line"></div> -->
|
<div id="echartConent" class="echartBox">
|
<div id="container" class="container" v-show="!showEcharts">
|
<div style="float: right;">
|
<el-link @click="dialogVisible = true"><i class="el-icon-plus"></i></el-link>
|
</div>
|
<svg class="keywords" @click="remlistener" @mousemove="listener($event)">
|
<a href="javascript:void(0)" v-for="(tag, index) in tags" :key="index" @contextmenu="removeClick($event, tag)"
|
@click="nodeClick(tag)">
|
<text class="text" :x="tag.x" :y="tag.y" :font-size="20 * (600 / (600 - tag.z))"
|
:fill-opacity="((400 + tag.z) / 600)" :fill="tag.color">{{ tag.text }}
|
</text>
|
</a>
|
</svg>
|
|
</div>
|
<div class="container" v-show="showEcharts">
|
<div class="SVGBox">
|
<index_v1></index_v1>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
|
<el-form :model="formInline" class="demo-form-inline">
|
<el-form-item label="请输入领域名称">
|
<el-input v-model="formInline.name" placeholder="请输入领域名称"></el-input>
|
</el-form-item>
|
</el-form>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
<el-button type="primary" @click="submitForm">确 定</el-button>
|
</span>
|
</el-dialog>
|
<div id="removeLabel" @mouseleave="remlistener($event)" class="removeLable">
|
<el-link @click="delGraphic">删除</el-link>
|
</div>
|
</div>
|
</template>
|
<script>
|
|
import index_v1 from '@/views/kgbuilder/index_v1';
|
import MyBread from "../../components/MyBread.vue";
|
import { knowledge_getGraph, knowledge_queryGraphResult, knowledge_createDomain, knowledge_deleteDomain } from "../../api/knowledge";
|
import * as echarts from "echarts"
|
import $ from 'jquery'
|
import * as d3 from "d3";
|
import { get } from 'ol/proj';
|
import { EventBus } from "@/utils/event-bus.js";
|
import { none } from 'ol/centerconstraint';
|
export default {
|
name: "catalogueManage",
|
components: {
|
MyBread,
|
index_v1
|
},
|
data() {
|
|
return {
|
ruleForm: {},
|
tags: [],
|
RADIUS: 200,
|
ZRADIUS: 200,
|
CX: 600,
|
CY: 300,
|
speedX: Math.PI / 360,
|
speedY: Math.PI / 360,
|
showEcharts: false,
|
myChart: null,
|
seriesData: [],
|
seriesLinks: [],
|
// d3属性
|
svg: null,
|
dialogVisible: false,
|
formInline: {
|
name: ''
|
},
|
graphic: null,
|
};
|
},
|
watch: {
|
|
},
|
methods: {
|
async submitForm() {
|
var name = this.formInline.name;
|
this.handleClose();
|
const data = knowledge_createDomain({
|
domain: name,
|
type: 0
|
})
|
if (data.code == 200) {
|
this.setResizeStart();
|
}
|
},
|
handleClose() {
|
this.dialogVisible = false;
|
this.formInline.name = '';
|
},
|
setContentReturn() {
|
this.ruleForm.name = null;
|
this.showEcharts = false;
|
},
|
setMenuClick(res) {
|
console.log("4", res)
|
},
|
async nodeClick(tag) {
|
this.remlistener();
|
this.$store.state.kgBuilderText = tag.label
|
this.showEcharts = true;
|
EventBus.$emit("nodeChange", true);
|
|
},
|
async initTags() {
|
const data = await knowledge_getGraph({
|
"command"
|
:
|
0,
|
"pageIndex"
|
:
|
1,
|
"pageSize"
|
:
|
5000,
|
});
|
if (data.status != 200) return;
|
const tagNames = data.data.data.nodeList;
|
//初始化标签位置
|
let tags = [];
|
const length = tagNames.length
|
for (let i = 0; i < length; i++) {
|
let tag = {};
|
let k = -1 + (2 * (i + 1) - 1) / length;
|
let a = Math.acos(k);
|
let b = a * Math.sqrt(length * Math.PI);
|
tag.text = tagNames[i].name;
|
tag.id = tagNames[i].id,
|
tag.label = tagNames[i].label,
|
tag.x = this.CX + this.RADIUS * Math.sin(a) * Math.cos(b);
|
tag.y = this.CY + this.RADIUS * Math.sin(a) * Math.sin(b);
|
tag.z = this.ZRADIUS * Math.cos(a);
|
tag.color =
|
"rgb(" +
|
parseInt(Math.random() * 255) +
|
"," +
|
parseInt(Math.random() * 255) +
|
"," +
|
parseInt(Math.random() * 255) +
|
")";
|
tags.push(tag);
|
}
|
this.tags = [].concat(tags);
|
},
|
rotateX(speedX) {
|
var cos = Math.cos(speedX);
|
var sin = Math.sin(speedX);
|
for (let tag of this.tags) {
|
var y1 = (tag.y - this.CY) * cos - tag.z * sin + this.CY;
|
var z1 = tag.z * cos + (tag.y - this.CY) * sin;
|
tag.y = y1;
|
tag.z = z1;
|
}
|
},
|
/**
|
* 自动滚动效果,计算滚动位置
|
*/
|
rotateY(speedY) {
|
var cos = Math.cos(speedY);
|
var sin = Math.sin(speedY);
|
for (let tag of this.tags) {
|
var x1 = (tag.x - this.CX) * cos - tag.z * sin + this.CX;
|
var z1 = tag.z * cos + (tag.x - this.CX) * sin;
|
tag.x = x1;
|
tag.z = z1;
|
}
|
},
|
/**
|
* 响应鼠标移动
|
*/
|
listener(event) {
|
var x = event.clientX - this.CX;
|
var y = event.clientY - this.CY;
|
this.speedX =
|
x * 0.0001 > 0
|
? Math.min(this.RADIUS * 0.00002, x * 0.0001)
|
: Math.max(-this.RADIUS * 0.00002, x * 0.0001);
|
this.speedY =
|
y * 0.0001 > 0
|
? Math.min(this.RADIUS * 0.00002, y * 0.0001)
|
: Math.max(-this.RADIUS * 0.00002, y * 0.0001);
|
var val = document.getElementById("removeLabel").style.display;
|
|
if (val == "none") {
|
document.getElementById("removeLabel").style.top = event.clientY - 20 + 'px';
|
document.getElementById("removeLabel").style.left = event.clientX + 10 + 'px';
|
}
|
|
},
|
removeClick(event, tag) {
|
this.graphic = tag;
|
document.getElementById("removeLabel").style.top = event.clientY - 20 + 'px';
|
document.getElementById("removeLabel").style.left = event.clientX + 10 + 'px';
|
$("#removeLabel").show();
|
},
|
remlistener() {
|
$("#removeLabel").hide();
|
},
|
async delGraphic() {
|
this.remlistener();
|
var obi = {
|
domain: this.graphic.label,
|
domainId: this.graphic.id
|
}
|
const data = await knowledge_deleteDomain(obi)
|
this.graphic = null;
|
if (data.status != 200) {
|
this.$message({
|
message: '删除失败',
|
type: 'danger'
|
});
|
} else {
|
this.$message({
|
message: '删除成功',
|
type: 'success'
|
});
|
this.initTags()
|
}
|
|
|
|
},
|
/**
|
* 监听窗体大小变化
|
*/
|
resizeWindow() {
|
if (this.showEcharts) return
|
let height = document.getElementById("container").clientHeight
|
let width = document.getElementById("container").clientWidth
|
width = width * 0.85;
|
if (width > 1200) {
|
this.CX = width / 2
|
}
|
height = height - 150
|
this.CY = height / 2;
|
let radius = Math.min(this.CY, this.CX) / 2
|
if (radius > 200) {
|
this.RADIUS = radius
|
}
|
this.initTags()
|
|
},
|
setResizeStart() {
|
this.resizeWindow()
|
window.addEventListener('resize', this.resizeWindow)
|
this.initTags();
|
//使球开始旋转
|
const interval = setInterval(() => {
|
this.rotateX(this.speedX);
|
this.rotateY(this.speedY);
|
}, 17);
|
this.$once('hook:beforedestroy', () => {
|
interval && clearInterval(interval)
|
window.removeEventListener('resize', this.resizeWindow)
|
})
|
},
|
|
},
|
mounted() {
|
var tree = document.getElementById("container");
|
tree.oncontextmenu = function () {
|
return false;
|
};
|
this.setResizeStart();
|
EventBus.$on("KonwReturn", () => {
|
this.setContentReturn();
|
});
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.subpage_Box {
|
width: 98%;
|
padding: 1%;
|
border-radius: 10px;
|
}
|
|
.removeLable {
|
position: absolute;
|
padding: 5px;
|
border-radius: 5%;
|
border: 1px solid gray;
|
background: white;
|
display: none;
|
}
|
|
.mainBox {
|
padding-top: 10px;
|
width: 100%;
|
height: calc(100% - 75px);
|
|
.echartBox {
|
width: 100%;
|
height: calc(94% - 10px);
|
margin-top: 10px;
|
z-index: 99;
|
|
.container,
|
.keywords {
|
width: 100%;
|
height: 100%;
|
}
|
|
.keywords .text:hover {
|
font-size: 200%;
|
}
|
|
.SVGBox {
|
width: 100%;
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.menuTool {
|
position: absolute;
|
z-index: 99999999999;
|
|
border: 1px solid gray;
|
background: white;
|
border-radius: 5%;
|
display: none;
|
padding: 0px 10px;
|
|
li {
|
line-height: 20px;
|
font-size: 12px;
|
}
|
|
li:hover {
|
color: #409EFF;
|
}
|
}
|
|
}
|
</style>
|
