Skip to content

F
founder_vue
Commit 5fe2c9f4 by liyuhang19990520
Options

脑图

parent dd6240f9
Showing with 376 additions and 2 deletions
src/components/AroundNaoTu.vue 0 → 100644
<template>
<div class="w100h100">
<div class="w100h100">
<SeeksRelationGraph ref="seeksRelationGraph" :options="userGraphOptions">
<div slot="node" slot-scope="{ node }" class="iconBtnBox">
<p>
{{ node.text }}
<!-- <span class="circleNum">2</span> -->
<span>
<img
@click="sss"
src="~@/assets/img/graphEcharts/car.png"
alt=""
/>
<img
@click="sss"
src="~@/assets/img/graphEcharts/car.png"
alt=""
/>
</span>
</p>
</div>
</SeeksRelationGraph>
</div>
</div>
</template>
<script>
import SeeksRelationGraph from "relation-graph";
export default {
name: "SeeksRelationGraphDemo",
components: { SeeksRelationGraph },
data() {
return {
g_loading: true,
userGraphOptions: {
backgrounImage: "",
backgrounImageNoRepeat: true,
layouts: [
{
label: "手工",
layoutName: "fixed",
layoutClassName: "seeks-layout-fixed",
defaultJunctionPoint: "border",
defaultNodeShape: 0,
defaultLineShape: 1,
},
],
defaultNodeBorderWidth: 0,
defaultNodeShape: 1,
allowShowMiniNameFilter: false,
allowShowMiniToolBar: true,
defaultJunctionPoint: "lr",
defaultLineShape: 2,
defaultLineColor: "rgba(0, 186, 189, 1)",
defaultNodeColor: "rgba(0, 206, 209, 1)",
disableDragNode: true,
},
};
},
created() {},
mounted() {
this.setGraphData();
},
methods: {
setGraphData() {
var _orign_data = {
entname: "中数智汇数据科技股份有限公司顶顶顶水水水水水水水水水水水水",
invs: [
{ id: "inv1", text: "北京某个公司服务服沙发啊说法阿萨是否务"},
{ id: "inv2", text: "张蜈支顶顶顶顶顶"},
{ id: "inv3", text: "如花王菲王菲菲" },
{ id: "inv4", text: "路人甲威风威风威风" },
{ id: "inv5", text: "路人乙发哇无法" },
],
persons: [
{ id: "person1", text: "张蜈支威风飞洒飞生" },
{ id: "person2", text: "包奥曼威风威风艾森" },
{ id: "person3", text: "路人甲无法访斯弗"},
{ id: "person4", text: "路人乙威风威风啊发"},
],
asInvs: [
{ id: "asinv1", text: "北京超级大橘科技有限公司" },
{ id: "asinv2", text: "北京超级大蚂蚁科技有限公司" },
{ id: "asinv3", text: "北京超级大米粒儿科技有限公司" },
],
branchs: [
{
id: "branch1",
text: "某个公司（北京）科技股份有限公司",
},
{
id: "branch2",
text: "某个公司（天津）科技股份有限公司",
},
{
id: "branch4",
text: "某个公司（成都）科技股份有限公司",
},
{
id: "branch5",
text: "某个公司（武汉）科技股份有限公司",
},
],
};
var _graphSetting = this.$refs.seeksRelationGraph.graphSetting;
this.$refs.seeksRelationGraph.graphSetting.defaultLineShape = 1;
// 手工设置节点的坐标
const _center = {
x: _graphSetting.viewSize.width / 2 - _graphSetting.canvasOffset.x,
y: _graphSetting.viewSize.height / 2 - _graphSetting.canvasOffset.y,
};
var graphData = {
rootId: "root",
nodes: [],
links: [],
};
// 添加根节点和虚拟节点
var rootNode = {
id: graphData.rootId,
name: _orign_data.entname,
styleClass: "c-g-center",
width: 250,
height: 50,
x: _center.x - 125,
y: _center.y - 25,
};
var invRootNode = {
id: "invRoot",
name: "股东顶顶顶",
styleClass: "c-g-group-node",
width: 100,
height: 50,
};
var personRootNode = {
id: "personRoot",
name: "高管烦烦烦",
styleClass: "c-g-group-node",
width: 100,
height: 50,
};
var asinvRootNode = {
id: "asinvRoot",
name: "对外投资顶顶顶",
styleClass: "c-g-group-node",
width: 100,
height: 50,
};
var branchRootNode = {
id: "branchRoot",
name: "分支机构大大大",
styleClass: "c-g-group-node",
width: 100,
height: 50,
};
invRootNode.x = _center.x - 200 - invRootNode.width;
invRootNode.y = _center.y - 100;
personRootNode.x = _center.x - 200 - personRootNode.width;
personRootNode.y = _center.y + 10;
asinvRootNode.x = _center.x + 200;
asinvRootNode.y = _center.y - 100;
branchRootNode.x = _center.x + 200;
branchRootNode.y = _center.y + 10;
// 添加节点数据到graphData
graphData.nodes.push(rootNode);
graphData.nodes.push(invRootNode);
graphData.nodes.push(personRootNode);
graphData.nodes.push(asinvRootNode);
graphData.nodes.push(branchRootNode);
// 添加根节点和虚拟节点之间的关系，并将关系数据放入graphData
graphData.links.push({
from: rootNode.id,
to: invRootNode.id,
styleClass: "c-g-l-group",
});
graphData.links.push({
from: rootNode.id,
to: personRootNode.id,
styleClass: "c-g-l-group",
});
graphData.links.push({
from: rootNode.id,
to: asinvRootNode.id,
styleClass: "c-g-l-group",
});
graphData.links.push({
from: rootNode.id,
to: branchRootNode.id,
styleClass: "c-g-l-group",
});
// 将股东加入虚拟节点"股东"
_orign_data.invs.forEach((thisNode, _index) => {
thisNode.width = 200;
thisNode.x = invRootNode.x - 300 - thisNode.width;
thisNode.y = invRootNode.y + _index * 42 * -1 + 30;
graphData.nodes.push(thisNode);
graphData.links.push({
from: invRootNode.id,
to: thisNode.id,
text: thisNode.desc,
arrow: "none",
lineShape: 4,
});
});
// 将高管加入虚拟节点"高管"
_orign_data.persons.forEach((thisNode, _index) => {
thisNode.width = 200;
thisNode.x = personRootNode.x - 200 - thisNode.width;
thisNode.y = personRootNode.y + _index * 42;
graphData.nodes.push(thisNode);
graphData.links.push({
from: personRootNode.id,
to: thisNode.id,
text: thisNode.desc,
arrow: "none",
lineShape: 4,
});
});
// 将对外投资企业加入虚拟节点"对外投资"
_orign_data.asInvs.forEach((thisNode, _index) => {
thisNode.x = asinvRootNode.x + 300;
thisNode.y = asinvRootNode.y + _index * 42 * -1 + 30;
graphData.nodes.push(thisNode);
graphData.links.push({
from: asinvRootNode.id,
to: thisNode.id,
text: thisNode.desc,
lineShape: 4,
});
});
// 将分支机构加入虚拟节点"分支机构东"
_orign_data.branchs.forEach((thisNode, _index) => {
thisNode.x = branchRootNode.x + 300;
thisNode.y = branchRootNode.y + _index * 42;
graphData.nodes.push(thisNode);
graphData.links.push({
from: branchRootNode.id,
to: thisNode.id,
text: thisNode.desc,
lineShape: 4,
});
});
this.$refs.seeksRelationGraph.setJsonData(
graphData,
(seeksRGGraph) => {}
);
},
sss() {
this.$message.error('该节点没有详情数据')
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.w100h100 {
width: 100%;
height: calc(100% - 2px);
}
.iconBtnBox {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 99999;
img {
width: 30px;
height: 30px;
margin-left: 5px;
cursor: pointer;
}
.circleNum {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
border-radius: 50%;
background-color: red;
}
}
</style>
\ No newline at end of file
src/router/index.js
/*
* @Author: your name
* @Date: 2021-06-22 15:23:03
* @LastEditTime: 2021-06-24 10:57:57
* @LastEditors: your name
* @LastEditTime: 2021-06-28 15:28:38
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\router\index.js
*/
......@@ -54,6 +54,24 @@ const routes = [
component: () => import("@/views/echarts/index.vue")
},
{
path: "/naotu",
name: "naotu",
meta: {
title: "脑图",
auth: 5
},
component: () => import("@/views/naotu/index.vue")
},
{
path: "/aroundnaotu",
name: "aroundnaotu",
meta: {
title: "脑图",
auth: 5
},
component: () => import("@/views/aroundnaotu/index.vue")
},
{
path: "*",
name: "error",
meta: {
......
src/views/Home.vue
......@@ -641,6 +641,7 @@ export default {
]
}
graph.appendJsonData(__graph_json_data, true, (seeksRGGraph) => {
console.log(seeksRGGraph)
// 这些写上当图谱初始化完成后需要执行的代码
})
}
......
src/views/aroundnaotu/index.vue 0 → 100644
<!--
* @Author: your name
* @Date: 2021-06-28 10:37:15
* @LastEditTime: 2021-06-28 15:27:59
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\naotu\index.vue
-->
<template>
<div id="naotu" ref="naotu">
<NaoTu />
</div>
</template>
<script>
import NaoTu from "@/components/AroundNaoTu.vue";
export default {
components: { NaoTu },
data() {
return {
text: 1111,
};
},
};
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
#naotu {
height: 100vh;
}
</style>
\ No newline at end of file
src/views/naotu/index.vue 0 → 100644
<!--
* @Author: your name
* @Date: 2021-06-28 10:37:15
* @LastEditTime: 2021-06-28 10:44:11
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\views\naotu\index.vue
-->
<template>
<div id="naotu" ref="naotu">
<NaoTu />
</div>
</template>
<script>
import NaoTu from "@/components/NaoTu.vue";
export default {
components: { NaoTu },
data() {
return {
text: 1111,
};
},
};
</script>
<style lang="scss" scoped>
* {
margin: 0;
padding: 0;
}
#naotu {
height: 100vh;
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment