Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
F
founder_vue
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
常超
founder_vue
Commits
3b8f7d29
Commit
3b8f7d29
authored
Dec 01, 2021
by
liyuhang19990520
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
444
parent
45a66805
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
433 additions
and
124 deletions
+433
-124
src/router/modules/ceshi.js
+2
-2
src/views/ceshi/cqceshi.vue
+431
-122
No files found.
src/router/modules/ceshi.js
View file @
3b8f7d29
/*
* @Author: your name
* @Date: 2021-07-20 14:42:16
* @LastEditTime: 2021-1
1-21 11:42:25
* @LastEditTime: 2021-1
2-01 15:41:59
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\router\modules\rightContent.js
*/
import
Main
from
'@/views/ceshi/cqceshi
2
.vue'
import
Main
from
'@/views/ceshi/cqceshi.vue'
export
default
{
path
:
"/cqceshi2"
,
...
...
src/views/ceshi/cqceshi.vue
View file @
3b8f7d29
<
template
>
<div>
<div
style=
"width: calc(100% - 2px);height:calc(100vh - 50px);"
>
<SeeksRelationGraph
ref=
"seeksRelationGraph"
:options=
"userGraphOptions"
/>
<div
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>
<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>
</template>
<
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
{
name
:
'SeeksRelationGraphDemo'
,
name
:
"Demo"
,
components
:
{
SeeksRelationGraph
},
data
()
{
return
{
g_loading
:
true
,
userGraphOptions
:
{
'backgrounImage'
:
''
,
'backgrounImageNoRepeat'
:
true
,
'layouts'
:
[
isShowCodePanel
:
false
,
isShowNodeMenuPanel
:
false
,
nodeMenuPanelPosition
:
{
x
:
0
,
y
:
0
},
graphOptions
:
{
allowSwitchLineShape
:
true
,
allowSwitchJunctionPoint
:
true
,
defaultJunctionPoint
:
"border"
,
// 这里可以参考"Graph 图谱"中的参数进行设置
layouts
:
[
{
'label'
:
'手工'
,
'layoutName'
:
'fixed'
,
'layoutClassName'
:
'seeks-layout-fixed'
,
'defaultJunctionPoint'
:
'border'
,
'defaultNodeShape'
:
0
,
'defaultLineShape'
:
1
}
label
:
"中心图"
,
layoutName
:
"center"
,
layoutClassName
:
"seeks-layout-center"
,
distance_coefficient
:
"0.8"
,
},
],
'defaultNodeBorderWidth'
:
0
,
'defaultNodeShape'
:
1
,
'allowShowMiniNameFilter'
:
false
,
'allowShowMiniToolBar'
:
false
,
'defaultJunctionPoint'
:
'lr'
,
'defaultLineShape'
:
2
}
}
},
created
()
{
},
table1
:
false
,
table2
:
false
,
table3
:
false
,
nodeArr
:
[
// 注意:在节点配置信息中,你的自定义属性需要像下面这样放到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"
}
},
{
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
()
{
this
.
s
etGraphData
()
this
.
s
howSeeksGraph
();
},
methods
:
{
setGraphData
()
{
var
_orign_data
=
{
entname
:
'中数智汇数据科技股份有限公司'
,
invs
:
[
{
id
:
'inv1'
,
text
:
'北京某个公司科技有限公司'
,
desc
:
'40%'
},
{
id
:
'inv2'
,
text
:
'张蜈支'
,
desc
:
'30%'
},
{
id
:
'inv3'
,
text
:
'如花'
,
desc
:
'10%'
},
{
id
:
'inv4'
,
text
:
'路人甲'
,
desc
:
'10%'
},
{
id
:
'inv5'
,
text
:
'路人乙'
,
desc
:
'10%'
}
],
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%'
}
handleSelectionChange
(
val
)
{
this
.
selectArr
=
val
;
},
showSeeksGraph
(
query
)
{
var
__graph_json_data
=
{
rootId
:
"2"
,
nodes
:
[
// 注意:在节点配置信息中,你的自定义属性需要像下面这样放到data标签中,否则数据会丢失
{
id
:
"2"
,
name
:
"节点-2"
,
data
:
{
myicon
:
"el-icon-setting"
}
},
],
branchs
:
[
{
id
:
'branch1'
,
text
:
'某个公司(北京)科技股份有限公司'
,
desc
:
'80%'
},
{
id
:
'branch2'
,
text
:
'某个公司(天津)科技股份有限公司'
,
desc
:
'70%'
},
{
id
:
'branch4'
,
text
:
'某个公司(成都)科技股份有限公司'
,
desc
:
'70%'
},
{
id
:
'branch5'
,
text
:
'某个公司(武汉)科技股份有限公司'
,
desc
:
'20%'
}
]
links
:
[],
};
this
.
$refs
.
seeksRelationGraph
.
setJsonData
(
__graph_json_data
,
(
seeksRGGraph
)
=>
{
// 这些写上当图谱初始化完成后需要执行的代码
}
);
},
onNodeClick
(
nodeObject
,
$event
)
{
this
.
currentNode
=
nodeObject
;
if
(
nodeObject
.
id
==
"2"
)
{
this
.
table1
=
true
;
}
else
{
this
.
$message
.
error
(
"该节点没有数据"
);
}
console
.
log
(
"onNodeClick:"
,
nodeObject
);
},
...
...
@@ -162,73 +411,134 @@ export default {
if
(
!
node
)
{
var
node
=
this
.
$refs
.
seeksRelationGraph
.
getNodeById
(
id
);
}
var
graphData
=
{
rootId
:
'root'
,
nodes
:
[],
links
:
[]
node
.
lot
.
childs
.
forEach
((
i
)
=>
{
if
(
i
.
lot
.
childs
.
length
>
0
)
{
this
.
btn4
(
i
);
}
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
;
}
// 添加根节点和虚拟节点
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
}
var
personRootNode
=
{
id
:
'personRoot'
,
name
:
'高管'
,
styleClass
:
'c-g-group-node'
,
color
:
'#B9FFA7'
,
width
:
100
,
height
:
50
}
var
asinvRootNode
=
{
id
:
'asinvRoot'
,
name
:
'对外投资'
,
styleClass
:
'c-g-group-node'
,
color
:
'#FFBEC1'
,
width
:
100
,
height
:
50
}
var
branchRootNode
=
{
id
:
'branchRoot'
,
name
:
'分支机构'
,
styleClass
:
'c-g-group-node'
,
color
:
'#FFA1F8'
,
width
:
100
,
height
:
50
}
invRootNode
.
x
=
_center
.
x
-
200
-
invRootNode
.
width
invRootNode
.
y
=
_center
.
y
-
130
personRootNode
.
x
=
_center
.
x
-
200
-
personRootNode
.
width
personRootNode
.
y
=
_center
.
y
+
90
asinvRootNode
.
x
=
_center
.
x
+
200
asinvRootNode
.
y
=
_center
.
y
-
130
branchRootNode
.
x
=
_center
.
x
+
200
branchRootNode
.
y
=
_center
.
y
+
90
// 添加节点数据到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'
,
color
:
'#C7E9FF'
,
lineShape
:
2
})
graphData
.
links
.
push
({
from
:
rootNode
.
id
,
to
:
personRootNode
.
id
,
styleClass
:
'c-g-l-group'
,
color
:
'#C7E9FF'
,
lineShape
:
2
})
graphData
.
links
.
push
({
from
:
rootNode
.
id
,
to
:
asinvRootNode
.
id
,
styleClass
:
'c-g-l-group'
,
color
:
'#C7E9FF'
,
lineShape
:
2
})
graphData
.
links
.
push
({
from
:
rootNode
.
id
,
to
:
branchRootNode
.
id
,
styleClass
:
'c-g-l-group'
,
color
:
'#C7E9FF'
,
lineShape
:
2
})
// 将股东加入虚拟节点"股东"
_orign_data
.
invs
.
forEach
((
thisNode
,
_index
)
=>
{
thisNode
.
width
=
200
thisNode
.
x
=
invRootNode
.
x
-
300
-
thisNode
.
width
thisNode
.
y
=
invRootNode
.
y
+
_index
*
30
*
-
2
+
30
graphData
.
nodes
.
push
(
thisNode
)
graphData
.
links
.
push
({
from
:
invRootNode
.
id
,
to
:
thisNode
.
id
,
text
:
thisNode
.
desc
,
color
:
'#FFC5A6'
,
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
*
30
*
-
2
+
100
graphData
.
nodes
.
push
(
thisNode
)
graphData
.
links
.
push
({
from
:
personRootNode
.
id
,
to
:
thisNode
.
id
,
text
:
thisNode
.
desc
,
color
:
'#B9FFA7'
,
arrow
:
'none'
,
lineShape
:
4
})
})
// 将对外投资企业加入虚拟节点"对外投资"
_orign_data
.
asInvs
.
forEach
((
thisNode
,
_index
)
=>
{
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
)
=>
{
})
}
}
}
const
data
=
[
{
date
:
"24"
,
name
:
"节点-1"
,
id
:
"1"
,
shang
:
true
,
},
{
date
:
"51"
,
name
:
"节点-3"
,
id
:
"3"
,
shang
:
true
,
},
{
date
:
"123"
,
name
:
"节点-4"
,
id
:
"4"
,
shang
:
true
,
},
{
date
:
"42"
,
name
:
"节点-6"
,
id
:
"6"
,
shang
:
true
,
},
{
date
:
"42"
,
name
:
"节点-7"
,
id
:
"7"
,
shang
:
true
,
},
];
let
arr
=
data
.
slice
(
0
,
this
.
selectArr
.
length
+
1
);
this
.
tableData2
=
arr
;
this
.
refreence
();
this
.
table2
=
true
;
},
},
watch
:
{
cunData
:
{
deep
:
true
,
handler
(
val
)
{
this
.
refreence
();
},
},
},
};
</
script
>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<
style
scoped
>
</
style
>
\ No newline at end of file
<
style
lang=
"scss"
>
</
style
>
<
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
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment