Skip to content

F
founder_vue
Commit 3b8f7d29 by liyuhang19990520
Options

444

parent 45a66805
Showing with 433 additions and 124 deletions
src/router/modules/ceshi.js
/* /*
* @Author: your name * @Author: your name
* @Date: 2021-07-20 14:42:16 * @Date: 2021-07-20 14:42:16
* @LastEditTime: 2021-11-21 11:42:25 * @LastEditTime: 2021-12-01 15:41:59
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: \founder_vue\src\router\modules\rightContent.js * @FilePath: \founder_vue\src\router\modules\rightContent.js
*/ */
import Main from '@/views/ceshi/cqceshi2.vue' import Main from '@/views/ceshi/cqceshi.vue'
export default { export default {
path: "/cqceshi2", path: "/cqceshi2",
......
src/views/ceshi/cqceshi.vue
<template> <template>
<div> <div>
<div style="width: calc(100% - 2px);height:calc(100vh - 50px);"> <div
<SeeksRelationGraph ref="seeksRelationGraph" :options="userGraphOptions" /> ref="myPage"
style="height: calc(100vh)"
@click="isShowNodeMenuPanel = false"
>
<SeeksRelationGraph
ref="seeksRelationGraph"
:options="graphOptions"
:on-node-click="onNodeClick"
:on-line-click="onLineClick"
>
<div
slot="node"
slot-scope="{ node }"
@contextmenu.prevent.stop="showNodeMenus(node, $event)"
>
<div
style="
height: 64px;
line-height: 64px;
border-radius: 32px;
cursor: pointer;
"
>
<i style="font-size: 30px" :class="node.data.myicon" />
</div>
<div
style="
color: forestgreen;
font-size: 16px;
position: absolute;
width: 160px;
height: 25px;
line-height: 25px;
margin-top: 5px;
margin-left: -48px;
text-align: center;
background-color: rgba(66, 187, 66, 0.2);
"
>
{{ node.text }}
</div>
</div>
</SeeksRelationGraph>
</div>
<div
v-show="isShowNodeMenuPanel"
:style="{
left: nodeMenuPanelPosition.x + 'px',
top: nodeMenuPanelPosition.y + 'px',
}"
style="
z-index: 999;
padding: 10px;
background-color: #ffffff;
border: #eeeeee solid 1px;
box-shadow: 0px 0px 8px #cccccc;
position: absolute;
"
>
<div
style="
line-height: 25px;
padding-left: 10px;
color: #888888;
font-size: 12px;
"
>
对这个节点进行操作：
</div>
<div class="c-node-menu-item" @click.stop="btn1()">复制账号</div>
<div class="c-node-menu-item" @click.stop="btn2()">标注</div>
<div class="c-node-menu-item" @click.stop="btn3()">展开</div>
<div class="c-node-menu-item" @click.stop="btn4()">收缩</div>
</div>
<div class="table1" v-if="table1">
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
class="table1_1"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column label="服务名称" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="服务状态" width="120">
</el-table-column>
</el-table>
<div>
<el-button type="primary" @click="primary">确认</el-button>
<el-button
type="success"
@click="
table1 = false;
table2 = false;
"
>取消</el-button
>
</div>
</div>
<div class="table2" v-if="table2">
<el-table
ref="multipleTable"
:data="tableData2"
tooltip-effect="dark"
style="width: 100%"
class="table1_2"
>
<el-table-column type="index" width="50"> </el-table-column>
<el-table-column prop="name" label="名称" width="120"></el-table-column>
<el-table-column prop="date" label="值" width="120"></el-table-column>
<el-table-column prop="name" label="操作" width="120">
<template slot-scope="scope">
<div
style="color: red"
v-if="scope.row.shang"
@click="
() => {
scope.row.shang = !scope.row.shang;
shangtu(scope.row);
}
"
>
上图
</div>
<div
style="color: green"
v-else
@click="
() => {
scope.row.shang = !scope.row.shang;
quxiaoshangtu(scope.row);
}
"
>
取消上图
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="table3" v-if="table3">
<el-table
ref="multipleTable"
:data="tableData3"
tooltip-effect="dark"
style="width: 100%"
class="table1_3"
>
<el-table-column type="index" width="50"> </el-table-column>
<el-table-column
prop="leixing"
label="类型"
width="120"
></el-table-column>
<el-table-column prop="zhi" label="值" width="120"></el-table-column>
<el-table-column prop="guanxi" label="关系" width="120">
</el-table-column>
</el-table>
</div> </div>
<el-button type="success" class="c-show-code-button"><el-link href="https://github.com/seeksdream/relation-graph/blob/master/doc/demo/Demo4SceneCompany.vue" target="_blank" style="color: #ffffff;">查看代码</el-link></el-button>
</div> </div>
</template> </template>
<script> <script>
import SeeksRelationGraph from 'relation-graph' const graphData = [
{ id: "1", name: "节点-1", data: { myicon: "el-icon-setting" } },
{ id: "2", name: "节点-2", data: { myicon: "el-icon-setting" } },
{ id: "3", name: "节点-3", data: { myicon: "el-icon-setting" } },
{ id: "4", name: "节点-4", data: { myicon: "el-icon-setting" } },
{ id: "6", name: "节点-6", data: { myicon: "el-icon-setting" } },
{ id: "7", name: "节点-7", data: { myicon: "el-icon-setting" } },
];
import SeeksRelationGraph from "@/utils/gxt.js";
export default { export default {
name: 'SeeksRelationGraphDemo', name: "Demo",
components: { SeeksRelationGraph }, components: { SeeksRelationGraph },
data() { data() {
return { return {
g_loading: true, isShowCodePanel: false,
userGraphOptions: { isShowNodeMenuPanel: false,
'backgrounImage': '', nodeMenuPanelPosition: { x: 0, y: 0 },
'backgrounImageNoRepeat': true, graphOptions: {
'layouts': [ allowSwitchLineShape: true,
allowSwitchJunctionPoint: true,
defaultJunctionPoint: "border",
// 这里可以参考"Graph 图谱"中的参数进行设置
layouts: [
{ {
'label': '手工', label: "中心图",
'layoutName': 'fixed', layoutName: "center",
'layoutClassName': 'seeks-layout-fixed', layoutClassName: "seeks-layout-center",
'defaultJunctionPoint': 'border', distance_coefficient: "0.8",
'defaultNodeShape': 0, },
'defaultLineShape': 1
}
], ],
'defaultNodeBorderWidth': 0, },
'defaultNodeShape': 1, table1: false,
'allowShowMiniNameFilter': false, table2: false,
'allowShowMiniToolBar': false, table3: false,
'defaultJunctionPoint': 'lr', nodeArr: [
'defaultLineShape': 2 // 注意：在节点配置信息中，你的自定义属性需要像下面这样放到data标签中，否则数据会丢失
} { id: "1", name: "节点-1", data: { myicon: "el-icon-setting" } },
} { id: "2", name: "节点-2", data: { myicon: "el-icon-setting" } },
}, { id: "3", name: "节点-3", data: { myicon: "el-icon-setting" } },
created() { { id: "4", name: "节点-4", data: { myicon: "el-icon-setting" } },
{ id: "6", name: "节点-6", data: { myicon: "el-icon-setting" } },
{ id: "7", name: "节点-7", data: { myicon: "el-icon-setting" } },
],
linkArr: [
{ from: "2", to: "1", text: "投资" },
{ from: "2", to: "3", text: "高管" },
{ from: "2", to: "4", text: "高管" },
{ from: "2", to: "6", text: "高管" },
{ from: "2", to: "7", text: "高管" },
],
tableData: [
{
date: "多维串并",
name: "运行",
},
{
date: "现场前科",
name: "运行",
},
{
date: "现场前科2",
name: "未运行",
},
{
date: "多维研判",
name: "未运行",
},
],
tableData2: [
{
date: "24",
name: "节点-1",
},
{
date: "51",
name: "节点-3",
},
{
date: "123",
name: "节点-4",
},
{
date: "42",
name: "节点-6",
},
{
date: "42",
name: "节点-7",
},
],
tableData3: [
{
leixing: "类型1",
zhi: "值1",
guanxi: "关系1",
},
{
leixing: "类型2",
zhi: "值2",
guanxi: "关系2",
},
{
leixing: "类型3",
zhi: "值3",
guanxi: "关系3",
},
{
leixing: "类型4",
zhi: "值4",
guanxi: "关系4",
},
{
leixing: "类型5",
zhi: "值5",
guanxi: "关系5",
},
],
selectArr: [],
currentNode: {},
cunData: [],
};
}, },
mounted() { mounted() {
this.setGraphData() this.showSeeksGraph();
}, },
methods: { methods: {
setGraphData() { handleSelectionChange(val) {
var _orign_data = { this.selectArr = val;
entname: '中数智汇数据科技股份有限公司', },
invs: [ showSeeksGraph(query) {
{ id: 'inv1', text: '北京某个公司科技有限公司', desc: '40%' }, var __graph_json_data = {
{ id: 'inv2', text: '张蜈支', desc: '30%' }, rootId: "2",
{ id: 'inv3', text: '如花', desc: '10%' }, nodes: [
{ id: 'inv4', text: '路人甲', desc: '10%' }, // 注意：在节点配置信息中，你的自定义属性需要像下面这样放到data标签中，否则数据会丢失
{ id: 'inv5', text: '路人乙', desc: '10%' } { id: "2", name: "节点-2", data: { myicon: "el-icon-setting" } },
],
persons: [
{ id: 'person1', text: '张蜈支', desc: '董事长' },
{ id: 'person2', text: '包奥曼', desc: '总经理' },
{ id: 'person3', text: '路人甲', desc: '监事' },
{ id: 'person4', text: '路人乙', desc: '董事' }
],
asInvs: [
{ id: 'asinv1', text: '北京超级大橘科技有限公司', desc: '80%' },
{ id: 'asinv2', text: '北京超级大蚂蚁科技有限公司', desc: '70%' },
{ id: 'asinv3', text: '北京超级大米粒儿科技有限公司', desc: '20%' }
], ],
branchs: [ links: [],
{ id: 'branch1', text: '某个公司（北京）科技股份有限公司', desc: '80%' }, };
{ id: 'branch2', text: '某个公司（天津）科技股份有限公司', desc: '70%' }, this.$refs.seeksRelationGraph.setJsonData(
{ id: 'branch4', text: '某个公司（成都）科技股份有限公司', desc: '70%' }, __graph_json_data,
{ id: 'branch5', text: '某个公司（武汉）科技股份有限公司', desc: '20%' } (seeksRGGraph) => {
] // 这些写上当图谱初始化完成后需要执行的代码
}
);
},
onNodeClick(nodeObject, $event) {
this.currentNode = nodeObject;
if (nodeObject.id == "2") {
this.table1 = true;
} else {
this.$message.error("该节点没有数据");
} }
console.log("onNodeClick:", nodeObject); console.log("onNodeClick:", nodeObject);
}, },
...@@ -162,73 +411,134 @@ export default { ...@@ -162,73 +411,134 @@ export default {
if (!node) { if (!node) {
var node = this.$refs.seeksRelationGraph.getNodeById(id); var node = this.$refs.seeksRelationGraph.getNodeById(id);
} }
var graphData = { node.lot.childs.forEach((i) => {
rootId: 'root', if (i.lot.childs.length > 0) {
nodes: [], this.btn4(i);
links: [] }
this.$refs.seeksRelationGraph.removeNodeById(i.id);
});
this.isShowNodeMenuPanel = false;
},
getGraphData() {
return JSON.parse(JSON.stringify(graphData));
},
shangtu(row) {
let self = this;
let nodearr = [
{ id: row.id, name: row.name, data: { myicon: "el-icon-setting" } },
];
let linkarr = [{ from: this.currentNode.id, to: row.id, text: "投资" }];
this.$refs.seeksRelationGraph.appendJsonData(
{
nodes: nodearr,
links: linkarr,
},
(seeksRGGraph) => {
self.cunData = seeksRGGraph.getNodes().map((i) => i.id);
console.log(1111111, self.cunData);
}
);
},
refreence() {
this.tableData2 = this.tableData2.map((i) => {
if (this.cunData.includes(i.id)) {
i.shang = false;
} else {
i.shang = true;
}
return i;
});
},
primary() {
if (this.selectArr.length <= 0) {
this.$message.error("请选择数据后进行操作");
return;
} }
// 添加根节点和虚拟节点 const data = [
var rootNode = { id: graphData.rootId, name: _orign_data.entname, styleClass: 'c-g-center', color: '#A4C1FF', width: 250, height: 50, x: _center.x - 125, y: _center.y - 25 } {
var invRootNode = { id: 'invRoot', name: '股东', styleClass: 'c-g-group-node', color: '#FFC5A6', width: 100, height: 50 } date: "24",
var personRootNode = { id: 'personRoot', name: '高管', styleClass: 'c-g-group-node', color: '#B9FFA7', width: 100, height: 50 } name: "节点-1",
var asinvRootNode = { id: 'asinvRoot', name: '对外投资', styleClass: 'c-g-group-node', color: '#FFBEC1', width: 100, height: 50 } id: "1",
var branchRootNode = { id: 'branchRoot', name: '分支机构', styleClass: 'c-g-group-node', color: '#FFA1F8', width: 100, height: 50 } shang: true,
invRootNode.x = _center.x - 200 - invRootNode.width },
invRootNode.y = _center.y - 130 {
personRootNode.x = _center.x - 200 - personRootNode.width date: "51",
personRootNode.y = _center.y + 90 name: "节点-3",
asinvRootNode.x = _center.x + 200 id: "3",
asinvRootNode.y = _center.y - 130 shang: true,
branchRootNode.x = _center.x + 200 },
branchRootNode.y = _center.y + 90 {
// 添加节点数据到graphData date: "123",
graphData.nodes.push(rootNode) name: "节点-4",
graphData.nodes.push(invRootNode) id: "4",
graphData.nodes.push(personRootNode) shang: true,
graphData.nodes.push(asinvRootNode) },
graphData.nodes.push(branchRootNode) {
// 添加根节点和虚拟节点之间的关系，并将关系数据放入graphData date: "42",
graphData.links.push({ from: rootNode.id, to: invRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 }) name: "节点-6",
graphData.links.push({ from: rootNode.id, to: personRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 }) id: "6",
graphData.links.push({ from: rootNode.id, to: asinvRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 }) shang: true,
graphData.links.push({ from: rootNode.id, to: branchRootNode.id, styleClass: 'c-g-l-group', color: '#C7E9FF', lineShape: 2 }) },
// 将股东加入虚拟节点"股东" {
_orign_data.invs.forEach((thisNode, _index) => { date: "42",
thisNode.width = 200 name: "节点-7",
thisNode.x = invRootNode.x - 300 - thisNode.width id: "7",
thisNode.y = invRootNode.y + _index * 30 * -2 + 30 shang: true,
graphData.nodes.push(thisNode) },
graphData.links.push({ from: invRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#FFC5A6', arrow: 'none', lineShape: 4 }) ];
}) let arr = data.slice(0, this.selectArr.length + 1);
// 将高管加入虚拟节点"高管" this.tableData2 = arr;
_orign_data.persons.forEach((thisNode, _index) => { this.refreence();
thisNode.width = 200 this.table2 = true;
thisNode.x = personRootNode.x - 200 - thisNode.width },
thisNode.y = personRootNode.y + _index * 30 * -2 + 100 },
graphData.nodes.push(thisNode) watch: {
graphData.links.push({ from: personRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#B9FFA7', arrow: 'none', lineShape: 4 }) cunData: {
}) deep: true,
// 将对外投资企业加入虚拟节点"对外投资" handler(val) {
_orign_data.asInvs.forEach((thisNode, _index) => { this.refreence();
thisNode.x = asinvRootNode.x + 200 },
thisNode.y = asinvRootNode.y + _index * 30 * -1 + 30 },
graphData.nodes.push(thisNode) },
graphData.links.push({ from: asinvRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#FFBEC1', lineShape: 4 }) };
})
// 将分支机构加入虚拟节点"分支机构东"
_orign_data.branchs.forEach((thisNode, _index) => {
thisNode.x = branchRootNode.x + 200
thisNode.y = branchRootNode.y + _index * 30
graphData.nodes.push(thisNode)
graphData.links.push({ from: branchRootNode.id, to: thisNode.id, text: thisNode.desc, color: '#FFA1F8', lineShape: 4 })
})
this.$refs.seeksRelationGraph.setJsonData(graphData, (seeksRGGraph) => {
})
}
}
}
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss">
<style scoped> </style>
</style>
\ No newline at end of file <style lang="scss" scoped>
.c-node-menu-item {
line-height: 30px;
padding-left: 10px;
cursor: pointer;
color: #444444;
font-size: 14px;
border-top: #efefef solid 1px;
}
.c-node-menu-item:hover {
background-color: rgba(66, 187, 66, 0.2);
}
.table1 {
width: 400px;
position: absolute;
top: 0;
right: 0;
z-index: 998;
}
.table2 {
width: 500px;
position: absolute;
top: 500px;
right: 0;
z-index: 998;
}
.table3 {
width: 500px;
position: absolute;
bottom: 0;
left: 50px;
z-index: 998;
}
.table1_1 {
}
</style>
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