Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
K
KnowledgeMap
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
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
wangshufen
KnowledgeMap
Commits
b890a542
Commit
b890a542
authored
Feb 06, 2023
by
wangshufen
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feature:登录功能添加token校验
parent
c734ee43
Show whitespace changes
Inline
Side-by-side
Showing
15 changed files
with
495 additions
and
553 deletions
+495
-553
.eslintrc.js
+21
-0
jsconfig.json
+10
-0
src/routes/Home/IndicationDetails/index.js
+1
-1
src/routes/Home/LigandDetails/index.js
+1
-1
src/routes/Home/MutationDetails/index.js
+1
-1
src/routes/Home/SearchDetails/index.js
+1
-1
src/routes/Home/SearchList/index.js
+1
-1
src/routes/Home/TargetDetails/index.js
+1
-1
src/routes/Home/index.js
+1
-1
src/routes/KnowledgeMap/index.js
+149
-222
src/routes/Login/LoginForm.js
+1
-1
src/routes/Login/index.js
+195
-300
src/routes/MolecularSearch/index.js
+1
-1
src/utils/request.js
+89
-12
src/utils/utils.js
+22
-10
No files found.
.eslintrc.js
0 → 100644
View file @
b890a542
module
.
exports
=
{
root
:
true
,
//此项是用来告诉eslint找当前配置文件不能往父级查找
env
:
{
node
:
true
,
},
// "off" -> 0 关闭规则 "warn" -> 1 开启警告规则 "error" -> 2 开启错误规则
rules
:
{
'generator-star-spacing'
:
'off'
,
'no-tabs'
:
'off'
,
'no-unused-vars'
:
'off'
,
//声明的变量未使用
'no-console'
:
'off'
,
'no-irregular-whitespace'
:
'off'
,
'no-debugger'
:
'off'
,
eqeqeq
:
'off'
,
// 使用全等
},
parser
:
'babel-eslint'
,
parserOptions
:
{
ecmaVersion
:
7
,
sourceType
:
'module'
,
},
};
jsconfig.json
0 → 100644
View file @
b890a542
{
"compilerOptions"
:
{
"baseUrl"
:
"./"
,
"experimentalDecorators"
:
true
,
"paths"
:
{
"@/*"
:
[
"src/*"
]
}
},
"exclude"
:
[
"node_modules"
,
".vscode"
,
"library"
,
"local"
,
"settings"
,
"temp"
,
"build"
]
}
src/routes/Home/IndicationDetails/index.js
View file @
b890a542
import
React
,
{
Component
}
from
'react'
import
React
,
{
Component
}
from
'react'
import
{
Pagination
,
message
,
Button
,
Tabs
,
Spin
,
Table
,
Tag
,
Typography
}
from
'antd'
import
{
Pagination
,
message
,
Button
,
Tabs
,
Spin
,
Table
,
Tag
,
Typography
}
from
'antd'
import
{
request
}
from
'../../../utils/request'
import
request
from
'../../../utils/request'
import
'./index.css'
import
'./index.css'
import
qs
from
'qs'
import
qs
from
'qs'
const
{
Title
}
=
Typography
const
{
Title
}
=
Typography
...
...
src/routes/Home/LigandDetails/index.js
View file @
b890a542
import
React
,
{
Component
}
from
'react'
import
React
,
{
Component
}
from
'react'
import
{
Card
,
Tooltip
,
Pagination
,
message
,
Radio
,
Button
,
Tabs
,
Spin
,
Table
,
Tag
,
Input
,
Collapse
,
Modal
,
Form
,
Select
,
InputNumber
,
Typography
}
from
'antd'
import
{
Card
,
Tooltip
,
Pagination
,
message
,
Radio
,
Button
,
Tabs
,
Spin
,
Table
,
Tag
,
Input
,
Collapse
,
Modal
,
Form
,
Select
,
InputNumber
,
Typography
}
from
'antd'
import
{
request
}
from
'../../../utils/request'
import
request
from
'../../../utils/request'
import
Molstar
from
"molstar-react"
import
Molstar
from
"molstar-react"
import
{
Jsme
}
from
'jsme-react'
import
{
Jsme
}
from
'jsme-react'
import
qs
from
'qs'
import
qs
from
'qs'
...
...
src/routes/Home/MutationDetails/index.js
View file @
b890a542
...
@@ -18,7 +18,7 @@ import {
...
@@ -18,7 +18,7 @@ import {
Anchor
,
Anchor
,
Pagination
Pagination
}
from
'antd'
}
from
'antd'
import
{
request
}
from
'../../../utils/request'
import
request
from
'../../../utils/request'
import
Molstar
from
'molstar-react'
import
Molstar
from
'molstar-react'
import
{
Jsme
}
from
'jsme-react'
import
{
Jsme
}
from
'jsme-react'
import
qs
from
'qs'
import
qs
from
'qs'
...
...
src/routes/Home/SearchDetails/index.js
View file @
b890a542
...
@@ -18,7 +18,7 @@ import {
...
@@ -18,7 +18,7 @@ import {
Pagination
,
Pagination
,
Anchor
Anchor
}
from
'antd'
}
from
'antd'
import
{
request
}
from
'../../../utils/request'
import
request
from
'../../../utils/request'
import
Molstar
from
'molstar-react'
import
Molstar
from
'molstar-react'
import
{
Jsme
}
from
'jsme-react'
import
{
Jsme
}
from
'jsme-react'
import
qs
from
'qs'
import
qs
from
'qs'
...
...
src/routes/Home/SearchList/index.js
View file @
b890a542
import
React
,
{
Component
}
from
'react'
import
React
,
{
Component
}
from
'react'
import
{
Jsme
}
from
'jsme-react'
import
{
Jsme
}
from
'jsme-react'
import
{
Card
,
Button
,
Pagination
,
Tabs
,
Spin
,
message
,
Tag
}
from
'antd'
import
{
Card
,
Button
,
Pagination
,
Tabs
,
Spin
,
message
,
Tag
}
from
'antd'
import
{
request
}
from
'../../../utils/request'
import
request
from
'../../../utils/request'
import
qs
from
'qs'
import
qs
from
'qs'
import
'./index.css'
import
'./index.css'
const
{
TabPane
}
=
Tabs
const
{
TabPane
}
=
Tabs
...
...
src/routes/Home/TargetDetails/index.js
View file @
b890a542
...
@@ -21,7 +21,7 @@ import {
...
@@ -21,7 +21,7 @@ import {
Anchor
,
Anchor
,
Pagination
Pagination
}
from
'antd'
}
from
'antd'
import
{
request
}
from
'../../../utils/request'
import
request
from
'../../../utils/request'
import
Molstar
from
'molstar-react'
import
Molstar
from
'molstar-react'
import
{
Jsme
}
from
'jsme-react'
import
{
Jsme
}
from
'jsme-react'
import
qs
from
'qs'
import
qs
from
'qs'
...
...
src/routes/Home/index.js
View file @
b890a542
...
@@ -14,7 +14,7 @@ import {
...
@@ -14,7 +14,7 @@ import {
import
LogoTitlte
from
'../../components/LogoTitlte/index'
import
LogoTitlte
from
'../../components/LogoTitlte/index'
import
{
Jsme
}
from
'jsme-react'
import
{
Jsme
}
from
'jsme-react'
import
qs
from
'qs'
import
qs
from
'qs'
import
{
request
}
from
'../../utils/request'
import
request
from
'../../utils/request'
import
'./style.css'
import
'./style.css'
const
{
TabPane
}
=
Tabs
const
{
TabPane
}
=
Tabs
const
{
Option
}
=
Select
const
{
Option
}
=
Select
...
...
src/routes/KnowledgeMap/index.js
View file @
b890a542
import
React
,
{
Component
}
from
'react'
import
React
,
{
Component
}
from
'react'
;
import
{
Jsme
}
from
'jsme-react'
import
{
Jsme
}
from
'jsme-react'
;
import
qs
from
'qs'
import
qs
from
'qs'
;
import
{
request
}
from
'../../utils/request'
import
request
from
'../../utils/request'
;
import
Graphin
,
{
GraphinContext
,
Components
,
Utils
}
from
'@antv/graphin'
import
Graphin
,
{
GraphinContext
,
Components
,
Utils
}
from
'@antv/graphin'
;
import
{
ContextMenu
,
}
from
'@antv/graphin-components'
import
{
ContextMenu
}
from
'@antv/graphin-components'
;
import
Animate
from
'rc-animate'
import
Animate
from
'rc-animate'
;
import
{
ContextMenuValue
}
from
'@antv/graphin'
import
{
ContextMenuValue
}
from
'@antv/graphin'
;
import
{
TooltipValue
}
from
'@antv/graphin'
import
{
TooltipValue
}
from
'@antv/graphin'
;
import
{
import
{
Select
,
message
,
Form
,
Button
,
Input
,
Checkbox
,
Row
,
Col
,
Card
}
from
'antd'
;
Select
,
import
'./index.css'
;
message
,
const
{
Option
}
=
Select
;
Form
,
const
{
Menu
}
=
ContextMenu
;
Button
,
const
{
Tooltip
}
=
Components
;
Input
,
Checkbox
,
Row
,
Col
,
Card
,
}
from
'antd'
import
'./index.css'
const
{
Option
}
=
Select
const
{
Menu
}
=
ContextMenu
const
{
Tooltip
}
=
Components
export
default
class
KnowledgeMap
extends
Component
{
export
default
class
KnowledgeMap
extends
Component
{
state
=
{
state
=
{
...
@@ -36,91 +26,84 @@ export default class KnowledgeMap extends Component {
...
@@ -36,91 +26,84 @@ export default class KnowledgeMap extends Component {
property
:
'chembl_id'
,
property
:
'chembl_id'
,
data
:
'CHEMBL1921'
,
data
:
'CHEMBL1921'
,
id
:
null
,
id
:
null
,
type_list
:
''
type_list
:
''
,
},
},
typeList
:
[],
typeList
:
[],
nodeData
:
{
nodeData
:
{
nodes
:
[],
nodes
:
[],
edges
:
[]
edges
:
[],
},
},
checkedList
:
[]
checkedList
:
[]
,
}
}
;
componentDidMount
()
{
componentDidMount
()
{
this
.
getSelectList
()
this
.
getSelectList
()
;
}
}
onClick
=
()
=>
{
onClick
=
()
=>
{
this
.
setState
({
this
.
setState
({
show
:
!
this
.
state
.
show
,
show
:
!
this
.
state
.
show
,
})
})
;
}
}
;
toggleCollapsed
=
()
=>
{
toggleCollapsed
=
()
=>
{
this
.
setState
({
this
.
setState
({
collapsed
:
!
this
.
state
.
collapsed
,
collapsed
:
!
this
.
state
.
collapsed
,
})
})
;
}
}
;
childClassChange
=
(
e
)
=>
{
childClassChange
=
(
e
)
=>
{
let
searchData
=
this
.
state
.
searchData
let
searchData
=
this
.
state
.
searchData
;
searchData
.
property
=
e
searchData
.
property
=
e
;
this
.
setState
(()
=>
({
searchData
:
searchData
}))
this
.
setState
(()
=>
({
searchData
:
searchData
}))
;
}
}
;
getClassData
=
(
e
)
=>
{
getClassData
=
(
e
)
=>
{
console
.
log
(
e
)
console
.
log
(
e
);
let
searchData
=
this
.
state
.
searchData
let
searchData
=
this
.
state
.
searchData
;
searchData
.
label
=
e
searchData
.
label
=
e
;
let
classList
=
this
.
state
.
classList
let
classList
=
this
.
state
.
classList
;
let
childData
=
[]
let
childData
=
[];
classList
.
forEach
(
classList
.
forEach
((
item
)
=>
{
item
=>
{
if
(
e
===
item
.
name
)
{
if
(
e
===
item
.
name
)
{
childData
=
item
.
content
childData
=
item
.
content
;
}
}
}
});
)
this
.
setState
({
childClassList
:
childData
})
}
this
.
setState
({
childClassList
:
childData
});
};
getSelectList
=
()
=>
{
getSelectList
=
()
=>
{
localStorage
.
getItem
(
'token'
)
&&
request
request
.
get
(
'kg/title'
)
.
get
(
'kg/title'
)
.
then
((
res
)
=>
{
.
then
((
res
)
=>
{
if
(
res
.
data
.
code
===
200
)
{
if
(
res
.
data
.
code
===
200
)
{
let
searchData
=
this
.
state
.
searchData
let
searchData
=
this
.
state
.
searchData
;
searchData
.
type_list
=
res
.
data
.
data
.
type_list
.
toString
()
searchData
.
type_list
=
res
.
data
.
data
.
type_list
.
toString
();
this
.
setState
({
this
.
setState
({
classList
:
res
.
data
.
data
.
all_class
,
classList
:
res
.
data
.
data
.
all_class
,
allClassList
:
res
.
data
.
data
.
type_list
,
allClassList
:
res
.
data
.
data
.
type_list
,
checkedList
:
res
.
data
.
data
.
type_list
,
checkedList
:
res
.
data
.
data
.
type_list
,
searchData
:
searchData
searchData
:
searchData
,
})
});
}
else
{
}
else
{
message
.
error
(
res
.
data
.
msg
)
message
.
error
(
res
.
data
.
msg
);
}
}
})
})
.
catch
((
err
)
=>
{
.
catch
((
err
)
=>
{
console
.
error
(
err
)
console
.
error
(
err
);
})
});
}
}
;
getMap
=
()
=>
{
getMap
=
()
=>
{
request
request
.
post
(
'kg/search'
,
qs
.
stringify
(
this
.
state
.
searchData
))
.
post
(
'kg/search'
,
qs
.
stringify
(
this
.
state
.
searchData
))
.
then
((
res
)
=>
{
.
then
((
res
)
=>
{
if
(
res
.
data
.
code
===
200
)
{
if
(
res
.
data
.
code
===
200
)
{
const
expandData
=
res
.
data
.
data
const
expandData
=
res
.
data
.
data
;
expandData
.
edges
.
forEach
(
edge
=>
{
expandData
.
edges
.
forEach
((
edge
)
=>
{
edge
.
style
=
{
edge
.
style
=
{};
}
edge
.
style
.
label
=
{
edge
.
style
.
label
=
{
value
:
edge
.
name
,
value
:
edge
.
name
,
}
};
});
})
console
.
log
(
this
.
state
.
nodeData
);
console
.
log
(
this
.
state
.
nodeData
)
// this.setState({
// this.setState({
// nodeData: res.data.data
// nodeData: res.data.data
...
@@ -131,43 +114,37 @@ export default class KnowledgeMap extends Component {
...
@@ -131,43 +114,37 @@ export default class KnowledgeMap extends Component {
nodes
:
[...
this
.
state
.
nodeData
.
nodes
,
...
expandData
.
nodes
],
nodes
:
[...
this
.
state
.
nodeData
.
nodes
,
...
expandData
.
nodes
],
edges
:
[...
this
.
state
.
nodeData
.
edges
,
...
expandData
.
edges
],
edges
:
[...
this
.
state
.
nodeData
.
edges
,
...
expandData
.
edges
],
},
},
})
});
}
else
{
}
else
{
message
.
error
(
res
.
data
.
msg
)
message
.
error
(
res
.
data
.
msg
)
;
}
}
})
})
.
catch
((
err
)
=>
{
.
catch
((
err
)
=>
{
console
.
error
(
err
)
console
.
error
(
err
)
;
})
})
;
}
}
;
getMapButton
=
()
=>
{
getMapButton
=
()
=>
{
let
searchData
=
this
.
state
.
searchData
let
searchData
=
this
.
state
.
searchData
;
searchData
.
id
=
null
searchData
.
id
=
null
;
this
.
setState
(()
=>
({
searchData
:
searchData
}))
this
.
setState
(()
=>
({
searchData
:
searchData
}))
;
this
.
getMap
()
this
.
getMap
()
;
}
}
;
onChange
=
(
checkedValues
)
=>
{
onChange
=
(
checkedValues
)
=>
{
let
searchData
=
this
.
state
.
searchData
let
searchData
=
this
.
state
.
searchData
;
searchData
.
type_list
=
checkedValues
.
toString
()
searchData
.
type_list
=
checkedValues
.
toString
()
;
console
.
log
(
checkedValues
.
toString
())
console
.
log
(
checkedValues
.
toString
())
;
this
.
setState
({
this
.
setState
({
checkedList
:
checkedValues
,
checkedList
:
checkedValues
,
searchData
:
searchData
searchData
:
searchData
,
});
})
};
}
handleChange
=
(
menuItem
,
menuData
)
=>
{
handleChange
=
(
menuItem
,
menuData
)
=>
{
console
.
log
(
menuItem
);
console
.
log
(
menuData
);
console
.
log
(
menuItem
)
let
searchData
=
this
.
state
.
searchData
;
console
.
log
(
menuData
)
searchData
.
id
=
menuData
.
id
;
let
searchData
=
this
.
state
.
searchData
this
.
getMap
();
searchData
.
id
=
menuData
.
id
this
.
getMap
()
// message.info(`元素:${menuData.id},动作:${menuItem.name}`)
// message.info(`元素:${menuData.id},动作:${menuItem.name}`)
// console.log(menuItem, menuData)
// console.log(menuItem, menuData)
...
@@ -187,7 +164,6 @@ export default class KnowledgeMap extends Component {
...
@@ -187,7 +164,6 @@ export default class KnowledgeMap extends Component {
// value: `${source}->${target}`,
// value: `${source}->${target}`,
// }
// }
// })
// })
// this.setState({
// this.setState({
// nodeData: {
// nodeData: {
...
@@ -196,18 +172,16 @@ export default class KnowledgeMap extends Component {
...
@@ -196,18 +172,16 @@ export default class KnowledgeMap extends Component {
// edges: [...this.state.nodeData.edges, ...expandData.edges],
// edges: [...this.state.nodeData.edges, ...expandData.edges],
// },
// },
// })
// })
};
}
getInputValue
=
(
e
)
=>
{
getInputValue
=
(
e
)
=>
{
const
{
value
}
=
e
.
target
const
{
value
}
=
e
.
target
;
let
searchData
=
this
.
state
.
searchData
let
searchData
=
this
.
state
.
searchData
;
searchData
.
data
=
value
searchData
.
data
=
value
;
this
.
setState
(()
=>
({
searchData
:
searchData
}))
this
.
setState
(()
=>
({
searchData
:
searchData
}));
};
}
render
()
{
render
()
{
const
{
classList
,
childClassList
,
allClassList
,
nodeData
}
=
this
.
state
;
const
{
classList
,
childClassList
,
allClassList
,
nodeData
}
=
this
.
state
// const data1 = Utils.mock(5)
// const data1 = Utils.mock(5)
// .circle()
// .circle()
// .graphin()
// .graphin()
...
@@ -219,13 +193,13 @@ export default class KnowledgeMap extends Component {
...
@@ -219,13 +193,13 @@ export default class KnowledgeMap extends Component {
const
defSpreingLen
=
(
_edge
,
source
,
target
)
=>
{
const
defSpreingLen
=
(
_edge
,
source
,
target
)
=>
{
/** 默认返回的是 200 的弹簧长度 */
/** 默认返回的是 200 的弹簧长度 */
/** 如果你要想要产生聚类的效果,可以考虑 根据边两边节点的度数来动态设置边的初始化长度:度数越小,则边越短 */
/** 如果你要想要产生聚类的效果,可以考虑 根据边两边节点的度数来动态设置边的初始化长度:度数越小,则边越短 */
const
nodeSize
=
30
const
nodeSize
=
30
;
const
Sdegree
=
source
.
data
.
layout
.
degree
const
Sdegree
=
source
.
data
.
layout
.
degree
;
const
Tdegree
=
target
.
data
.
layout
.
degree
const
Tdegree
=
target
.
data
.
layout
.
degree
;
const
minDegree
=
Math
.
min
(
Sdegree
,
Tdegree
)
const
minDegree
=
Math
.
min
(
Sdegree
,
Tdegree
)
;
console
.
log
(
minDegree
<
3
?
nodeSize
*
5
:
minDegree
*
nodeSize
)
console
.
log
(
minDegree
<
3
?
nodeSize
*
5
:
minDegree
*
nodeSize
)
;
return
minDegree
<
3
?
nodeSize
*
5
:
minDegree
*
nodeSize
return
minDegree
<
3
?
nodeSize
*
5
:
minDegree
*
nodeSize
;
}
}
;
const
options
=
[
const
options
=
[
// {
// {
...
@@ -243,117 +217,88 @@ export default class KnowledgeMap extends Component {
...
@@ -243,117 +217,88 @@ export default class KnowledgeMap extends Component {
// icon: <ExpandAltOutlined />,
// icon: <ExpandAltOutlined />,
name
:
'扩散'
,
name
:
'扩散'
,
},
},
]
]
;
const
CanvasMenu
=
()
=>
{
const
CanvasMenu
=
()
=>
{
const
{
graph
,
contextmenu
}
=
React
.
useContext
(
GraphinContext
)
const
{
graph
,
contextmenu
}
=
React
.
useContext
(
GraphinContext
)
;
const
context
=
contextmenu
.
canvas
const
context
=
contextmenu
.
canvas
;
const
handleDownload
=
()
=>
{
const
handleDownload
=
()
=>
{
graph
.
downloadFullImage
(
'canvas-contextmenu'
)
graph
.
downloadFullImage
(
'canvas-contextmenu'
)
;
context
.
handleClose
()
context
.
handleClose
()
;
}
}
;
const
handleClear
=
()
=>
{
const
handleClear
=
()
=>
{
message
.
info
(
`清除画布成功`
)
message
.
info
(
`清除画布成功`
)
;
context
.
handleClose
()
context
.
handleClose
()
;
}
}
;
const
handleStopLayout
=
()
=>
{
const
handleStopLayout
=
()
=>
{
message
.
info
(
`停止布局成功`
)
message
.
info
(
`停止布局成功`
)
;
context
.
handleClose
()
context
.
handleClose
()
;
}
}
;
return
(
return
(
<
Menu
bindType
=
"canvas"
>
<
Menu
bindType
=
'canvas'
>
{
/* <Menu.Item onClick={handleClear}>清除画布</Menu.Item>
{
/* <Menu.Item onClick={handleClear}>清除画布</Menu.Item>
<Menu.Item onClick={handleStopLayout}>停止布局</Menu.Item>
<Menu.Item onClick={handleStopLayout}>停止布局</Menu.Item>
<Menu.Item onClick={handleDownload}>下载画布</Menu.Item> */
}
<Menu.Item onClick={handleDownload}>下载画布</Menu.Item> */
}
<
/Menu
>
<
/Menu
>
)
)
;
}
}
;
return
(
return
(
<
div
className
=
"KnowledgeMap-div"
>
<
div
className
=
'KnowledgeMap-div'
>
<
div
className
=
"KnowledgeMap-left-div"
>
<
div
className
=
'KnowledgeMap-left-div'
>
<
Card
hoverable
style
=
{{
width
:
'100%'
}}
>
<
Card
hoverable
style
=
{{
width
:
'100%'
}}
>
<
Animate
transitionName
=
"fade"
transitionAppear
>
<
Animate
transitionName
=
'fade'
transitionAppear
>
{
this
.
state
.
show
?
(
{
this
.
state
.
show
?
(
<
Form
onSubmit
=
{
this
.
handleSubmit
}
className
=
"login-form"
>
<
Form
onSubmit
=
{
this
.
handleSubmit
}
className
=
'login-form'
>
<
Form
.
Item
>
<
Form
.
Item
>
<
Select
<
Select
placeholder
=
'请选择'
style
=
{{
width
:
270
}}
size
=
'large'
onChange
=
{
this
.
getClassData
}
>
placeholder
=
"请选择"
style
=
{{
width
:
270
}}
size
=
"large"
onChange
=
{
this
.
getClassData
}
>
{
classList
.
map
((
item
,
index
)
=>
{
{
classList
.
map
((
item
,
index
)
=>
{
return
(
return
(
<
Option
key
=
{
index
}
value
=
{
item
.
name
}
>
<
Option
key
=
{
index
}
value
=
{
item
.
name
}
>
{
item
.
name
}
{
item
.
name
}
<
/Option
>
<
/Option
>
)
)
;
})}
})}
<
/Select
>
<
/Select
>
<
/Form.Item
>
<
/Form.Item
>
<
Form
.
Item
>
<
Form
.
Item
>
<
Select
<
Select
placeholder
=
'请选择'
style
=
{{
width
:
270
}}
size
=
'large'
onChange
=
{
this
.
childClassChange
}
>
placeholder
=
"请选择"
style
=
{{
width
:
270
}}
size
=
"large"
onChange
=
{
this
.
childClassChange
}
>
{
childClassList
.
map
((
item
,
index
)
=>
{
{
childClassList
.
map
((
item
,
index
)
=>
{
return
(
return
(
<
Option
key
=
{
index
}
value
=
{
item
.
name
}
>
<
Option
key
=
{
index
}
value
=
{
item
.
name
}
>
{
item
.
name
}
{
item
.
name
}
<
/Option
>
<
/Option
>
)
)
;
})}
})}
<
/Select
>
<
/Select
>
<
/Form.Item
>
<
/Form.Item
>
<
Form
.
Item
>
<
Form
.
Item
>
<
Input
placeholder
=
"请输入"
<
Input
placeholder
=
'请输入'
size
=
'large'
onChange
=
{
this
.
getInputValue
}
value
=
{
this
.
state
.
searchData
.
data
}
/
>
size
=
"large"
onChange
=
{
this
.
getInputValue
}
value
=
{
this
.
state
.
searchData
.
data
}
/
>
<
/Form.Item
>
<
/Form.Item
>
<
Checkbox
.
Group
<
Checkbox
.
Group
style
=
{{
width
:
'100%'
}}
onChange
=
{
this
.
onChange
}
value
=
{
this
.
state
.
checkedList
}
>
style
=
{{
width
:
'100%'
}}
onChange
=
{
this
.
onChange
}
value
=
{
this
.
state
.
checkedList
}
>
<
Row
>
<
Row
>
{
{
allClassList
.
map
((
item
,
index
)
=>
{
allClassList
.
map
((
item
,
index
)
=>
{
return
(
return
(
<
Col
span
=
{
16
}
key
=
{
index
}
>
<
Col
span
=
{
16
}
key
=
{
index
}
>
<
Checkbox
value
=
{
item
}
>
{
item
}
<
/Checkbox
>
<
Checkbox
value
=
{
item
}
>
{
item
}
<
/Checkbox
>
<
/Col
>
<
/Col
>
)
);
})}
})
}
<
/Row
>
<
/Row
>
<
/Checkbox.Group
>
<
/Checkbox.Group
>
<
Form
.
Item
>
<
Form
.
Item
>
<
Button
<
Button
onClick
=
{
this
.
getMapButton
}
type
=
'primary'
htmlType
=
'submit'
className
=
'login-form-button'
>
onClick
=
{
this
.
getMapButton
}
type
=
"primary"
htmlType
=
"submit"
className
=
"login-form-button"
>
搜索
搜索
<
/Button
>
<
/Button
>
<
/Form.Item
>
<
/Form.Item
>
<
/Form
>
<
/Form
>
)
:
null
}
)
:
null
}
<
/Animate
>
<
/Animate
>
<
Button
<
Button
type
=
'primary'
htmlType
=
'submit'
className
=
'login-form-button'
onClick
=
{
this
.
onClick
}
>
type
=
"primary"
htmlType
=
"submit"
className
=
"login-form-button"
onClick
=
{
this
.
onClick
}
>
{
this
.
state
.
show
?
'收起'
:
'展开'
}
{
this
.
state
.
show
?
'收起'
:
'展开'
}
<
/Button
>
<
/Button
>
<
/Card
>
<
/Card
>
<
/div
>
<
/div
>
<
div
className
=
"KnowledgeMap-right-div"
>
<
div
className
=
'KnowledgeMap-right-div'
>
<
Graphin
<
Graphin
data
=
{
nodeData
}
data
=
{
nodeData
}
layout
=
{{
layout
=
{{
...
@@ -363,87 +308,69 @@ export default class KnowledgeMap extends Component {
...
@@ -363,87 +308,69 @@ export default class KnowledgeMap extends Component {
},
},
animation
:
true
,
animation
:
true
,
// defSpringLen: defSpreingLen,
// defSpringLen: defSpreingLen,
}}
>
}}
<
Tooltip
bindType
=
"node"
style
=
{{
width
:
'200px'
}}
>
>
<
Tooltip
bindType
=
'node'
style
=
{{
width
:
'200px'
}}
>
{(
value
)
=>
{
{(
value
)
=>
{
if
(
value
.
model
)
{
if
(
value
.
model
)
{
const
{
model
}
=
value
const
{
model
}
=
value
;
return
(
return
(
<
div
>
<
div
>
{
{
Object
.
keys
(
model
.
data
).
map
((
item
,
index
)
=>
{
Object
.
keys
(
model
.
data
).
map
((
item
,
index
)
=>
{
if
(
item
!=
'smiles'
)
{
if
(
item
!=
'smiles'
)
{
return
(
return
(
<
div
key
=
{
index
}
>
<
div
key
=
{
index
}
>
{
item
}:{
model
.
data
[
item
]}
{
item
}:{
model
.
data
[
item
]}
<
/div
>
<
/div
>
);
)
}
else
{
return
<
Jsme
key
=
{
index
}
height
=
'150px'
width
=
''
options
=
'depict,useopenchemlib'
smiles
=
{
model
.
data
[
item
]}
/>
;
}
else
{
return
(
<
Jsme
key
=
{
index
}
height
=
"150px"
width
=
""
options
=
"depict,useopenchemlib"
smiles
=
{
model
.
data
[
item
]}
/
>
)
}
})
}
}
})}
<
/div
>
<
/div
>
)
)
;
}
}
return
null
return
null
;
}}
}}
<
/Tooltip
>
<
/Tooltip
>
<
ContextMenu
style
=
{{
width
:
'80px'
}}
>
<
ContextMenu
style
=
{{
width
:
'80px'
}}
>
<
Menu
<
Menu
options
=
{
options
}
onChange
=
{
this
.
handleChange
}
bindType
=
'node'
/>
options
=
{
options
}
onChange
=
{
this
.
handleChange
}
bindType
=
"node"
/>
<
/ContextMenu
>
<
/ContextMenu
>
<
ContextMenu
style
=
{{
width
:
'80px'
}}
bindType
=
"canvas"
>
<
ContextMenu
style
=
{{
width
:
'80px'
}}
bindType
=
'canvas'
>
<
CanvasMenu
/>
<
CanvasMenu
/>
<
/ContextMenu
>
<
/ContextMenu
>
<
ContextMenu
style
=
{{
width
:
'120px'
}}
bindType
=
"edge"
>
<
ContextMenu
style
=
{{
width
:
'120px'
}}
bindType
=
'edge'
>
<
Menu
<
Menu
options
=
{
options
.
map
((
item
)
=>
{
options
=
{
options
.
map
((
item
)
=>
{
return
{
...
item
,
name
:
`
${
item
.
name
}
-EDGE`
}
return
{
...
item
,
name
:
`
${
item
.
name
}
-EDGE`
}
;
})}
})}
onChange
=
{
this
.
handleChange
}
onChange
=
{
this
.
handleChange
}
bindType
=
"edge"
bindType
=
'edge'
/>
/>
<
/ContextMenu
>
<
/ContextMenu
>
<
Tooltip
bindType
=
"edge"
>
<
Tooltip
bindType
=
'edge'
>
{(
value
)
=>
{
{(
value
)
=>
{
if
(
value
.
model
)
{
if
(
value
.
model
)
{
const
{
model
}
=
value
const
{
model
}
=
value
;
return
(
return
(
<
div
>
<
div
>
{
{
Object
.
keys
(
model
.
data
).
map
((
item
,
index
)
=>
{
Object
.
keys
(
model
.
data
).
map
((
item
,
index
)
=>
{
return
(
return
(
<
div
key
=
{
index
}
>
<
div
key
=
{
index
}
>
{
item
}:{
model
.
data
[
item
]}
{
item
}:{
model
.
data
[
item
]}
<
/div
>
<
/div
>
)
);
})
})}
}
<
/div
>
<
/div
>
)
)
;
}
}
return
null
return
null
;
}}
}}
<
/Tooltip
>
<
/Tooltip
>
<
/Graphin
>
<
/Graphin
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
)
)
;
}
}
}
}
src/routes/Login/LoginForm.js
View file @
b890a542
...
@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom'
...
@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom'
import
{
inject
,
observer
}
from
'mobx-react/index'
import
{
inject
,
observer
}
from
'mobx-react/index'
import
{
Form
,
Input
,
message
}
from
'antd'
import
{
Form
,
Input
,
message
}
from
'antd'
import
PromptBox
from
'../../components/PromptBox'
import
PromptBox
from
'../../components/PromptBox'
import
{
request
}
from
'../../utils/request'
import
request
from
'../../utils/request'
import
qs
from
'qs'
import
qs
from
'qs'
import
md5
from
'js-md5'
import
md5
from
'js-md5'
...
...
src/routes/Login/index.js
View file @
b890a542
import
React
,
{
Component
}
from
'react'
import
React
,
{
Component
}
from
'react'
;
import
{
Jsme
}
from
'jsme-react'
import
{
Jsme
}
from
'jsme-react'
;
import
qs
from
'qs'
import
qs
from
'qs'
;
import
{
request
}
from
'../../utils/request'
import
request
from
'../../utils/request'
;
import
Graphin
,
{
GraphinContext
,
Components
,
Utils
}
from
'@antv/graphin'
import
Graphin
,
{
GraphinContext
,
Components
,
Utils
}
from
'@antv/graphin'
;
import
{
ContextMenu
}
from
'@antv/graphin-components'
import
{
ContextMenu
}
from
'@antv/graphin-components'
;
import
Animate
from
'rc-animate'
import
Animate
from
'rc-animate'
;
import
{
ContextMenuValue
}
from
'@antv/graphin'
import
{
ContextMenuValue
}
from
'@antv/graphin'
;
// import { TooltipValue } from '@antv/graphin'
// import { TooltipValue } from '@antv/graphin'
import
{
import
{
Select
,
message
,
Form
,
Button
,
Input
,
Checkbox
,
Row
,
Col
,
Card
,
Tag
}
from
'antd'
;
Select
,
import
'./index.css'
;
message
,
const
{
Option
}
=
Select
;
Form
,
const
{
Menu
}
=
ContextMenu
;
Button
,
Input
,
Checkbox
,
Row
,
Col
,
Card
,
Tag
,
}
from
'antd'
import
'./index.css'
const
{
Option
}
=
Select
const
{
Menu
}
=
ContextMenu
// const { Tooltip } = Components
// const { Tooltip } = Components
export
default
class
KnowledgeMap
extends
Component
{
export
default
class
KnowledgeMap
extends
Component
{
...
@@ -54,200 +43,167 @@ export default class KnowledgeMap extends Component {
...
@@ -54,200 +43,167 @@ export default class KnowledgeMap extends Component {
name
:
'详情'
,
name
:
'详情'
,
},
},
],
],
}
}
;
componentDidMount
()
{
componentDidMount
()
{
this
.
getSelectList
()
this
.
getSelectList
()
;
}
}
onClick
=
()
=>
{
onClick
=
()
=>
{
this
.
setState
({
this
.
setState
({
show
:
!
this
.
state
.
show
,
show
:
!
this
.
state
.
show
,
})
})
;
}
}
;
getReferences2
=
(
e
)
=>
{
getReferences2
=
(
e
)
=>
{
window
.
open
(
e
)
window
.
open
(
e
)
;
}
}
;
toggleCollapsed
=
()
=>
{
toggleCollapsed
=
()
=>
{
this
.
setState
({
this
.
setState
({
collapsed
:
!
this
.
state
.
collapsed
,
collapsed
:
!
this
.
state
.
collapsed
,
})
})
;
}
}
;
childClassChange
=
(
e
)
=>
{
childClassChange
=
(
e
)
=>
{
let
searchData
=
this
.
state
.
searchData
let
searchData
=
this
.
state
.
searchData
;
searchData
.
property
=
e
searchData
.
property
=
e
;
this
.
setState
(()
=>
({
searchData
:
searchData
}))
this
.
setState
(()
=>
({
searchData
:
searchData
}))
;
}
}
;
getClassData
=
(
e
)
=>
{
getClassData
=
(
e
)
=>
{
// console.log(e)
// console.log(e)
let
searchData
=
this
.
state
.
searchData
let
searchData
=
this
.
state
.
searchData
;
searchData
.
label
=
e
searchData
.
label
=
e
;
let
classList
=
this
.
state
.
classList
let
classList
=
this
.
state
.
classList
;
let
childData
=
[]
let
childData
=
[]
;
classList
.
forEach
((
item
)
=>
{
classList
.
forEach
((
item
)
=>
{
if
(
e
===
item
.
name
)
{
if
(
e
===
item
.
name
)
{
childData
=
item
.
content
childData
=
item
.
content
;
}
}
})
})
;
this
.
setState
({
childClassList
:
childData
})
this
.
setState
({
childClassList
:
childData
})
;
}
}
;
getSelectList
=
()
=>
{
getSelectList
=
()
=>
{
localStorage
.
getItem
(
'token'
)
&&
request
request
.
get
(
'kg/title'
)
.
get
(
'kg/title'
)
.
then
((
res
)
=>
{
.
then
((
res
)
=>
{
if
(
res
.
data
.
code
===
200
)
{
if
(
res
.
data
.
code
===
200
)
{
let
searchData
=
this
.
state
.
searchData
let
searchData
=
this
.
state
.
searchData
;
let
typeList
=
[]
let
typeList
=
[];
res
.
data
.
data
.
type_list
.
forEach
((
item
)
=>
{
res
.
data
.
data
.
type_list
.
forEach
((
item
)
=>
{
typeList
.
push
(
item
.
name
)
typeList
.
push
(
item
.
name
);
})
});
searchData
.
type_list
=
typeList
.
toString
()
searchData
.
type_list
=
typeList
.
toString
();
this
.
setState
({
this
.
setState
({
classList
:
res
.
data
.
data
.
all_class
,
classList
:
res
.
data
.
data
.
all_class
,
allClassList
:
res
.
data
.
data
.
type_list
,
allClassList
:
res
.
data
.
data
.
type_list
,
checkedList
:
typeList
,
checkedList
:
typeList
,
searchData
:
searchData
,
searchData
:
searchData
,
})
});
}
else
{
}
else
{
message
.
error
(
res
.
data
.
msg
)
message
.
error
(
res
.
data
.
msg
);
}
}
})
})
.
catch
((
err
)
=>
{
.
catch
((
err
)
=>
{
console
.
error
(
err
)
console
.
error
(
err
);
})
});
}
}
;
getMap
=
()
=>
{
getMap
=
()
=>
{
request
request
.
post
(
'kg/search'
,
qs
.
stringify
(
this
.
state
.
searchData
))
.
post
(
'kg/search'
,
qs
.
stringify
(
this
.
state
.
searchData
))
.
then
((
res
)
=>
{
.
then
((
res
)
=>
{
if
(
res
.
data
.
code
===
200
)
{
if
(
res
.
data
.
code
===
200
)
{
const
expandData
=
res
.
data
;
const
expandData
=
res
.
data
expandData
.
edges
.
forEach
((
edge
)
=>
{
expandData
.
edges
.
forEach
((
edge
)
=>
{
edge
.
style
=
{}
edge
.
style
=
{}
;
edge
.
style
.
label
=
{
edge
.
style
.
label
=
{
value
:
edge
.
name
,
value
:
edge
.
name
,
}
}
;
edge
.
id
=
''
edge
.
id
=
''
;
})
})
;
expandData
.
nodes
.
forEach
((
node
)
=>
{
expandData
.
nodes
.
forEach
((
node
)
=>
{
console
.
log
(
node
)
console
.
log
(
node
);
if
(
node
.
label
==
"Drug"
)
{
node
.
type
=
'circle'
node
.
size
=
[
50
,
50
]
if
(
node
.
label
==
'Drug'
)
{
node
.
type
=
'circle'
;
node
.
size
=
[
50
,
50
];
node
.
label
=
node
.
style
.
label
.
value
node
.
label
=
node
.
style
.
label
.
value
;
node
.
style
=
{
node
.
style
=
{
stroke
:
node
.
colour
,
stroke
:
node
.
colour
,
fill
:
node
.
colour
,
fill
:
node
.
colour
,
opacity
:
1
,
opacity
:
1
,
fillOpacity
:
1
,
fillOpacity
:
1
,
}
}
;
node
.
labelCfg
=
{
node
.
labelCfg
=
{
position
:
'bottom'
,
position
:
'bottom'
,
};
}
}
}
if
(
node
.
label
==
"Receptor"
)
{
if
(
node
.
label
==
'Receptor'
)
{
node
.
type
=
'rect'
node
.
type
=
'rect'
;
node
.
size
=
[
50
,
50
]
node
.
size
=
[
50
,
50
]
;
node
.
label
=
node
.
style
.
label
.
value
;
node
.
label
=
node
.
style
.
label
.
value
node
.
style
=
{
node
.
style
=
{
stroke
:
node
.
colour
,
stroke
:
node
.
colour
,
fill
:
node
.
colour
,
fill
:
node
.
colour
,
opacity
:
1
,
opacity
:
1
,
fillOpacity
:
1
,
fillOpacity
:
1
,
}
}
;
node
.
labelCfg
=
{
node
.
labelCfg
=
{
position
:
'bottom'
,
position
:
'bottom'
,
};
}
}
}
if
(
node
.
label
==
"Indication"
)
{
if
(
node
.
label
==
'Indication'
)
{
node
.
type
=
'diamond'
node
.
type
=
'diamond'
;
node
.
size
=
[
60
,
60
]
node
.
size
=
[
60
,
60
];
node
.
label
=
node
.
style
.
label
.
value
node
.
label
=
node
.
style
.
label
.
value
;
node
.
style
=
{
node
.
style
=
{
stroke
:
node
.
colour
,
stroke
:
node
.
colour
,
fill
:
node
.
colour
,
fill
:
node
.
colour
,
opacity
:
1
,
opacity
:
1
,
fillOpacity
:
1
,
fillOpacity
:
1
,
}
}
;
node
.
labelCfg
=
{
node
.
labelCfg
=
{
position
:
'bottom'
,
position
:
'bottom'
,
};
}
}
if
(
node
.
label
==
'Mutation'
)
{
node
.
type
=
'triangle'
;
node
.
size
=
[
40
,
40
];
node
.
label
=
node
.
style
.
label
.
value
;
}
if
(
node
.
label
==
"Mutation"
)
{
node
.
type
=
'triangle'
node
.
size
=
[
40
,
40
]
node
.
label
=
node
.
style
.
label
.
value
node
.
style
=
{
node
.
style
=
{
stroke
:
node
.
colour
,
stroke
:
node
.
colour
,
fill
:
node
.
colour
,
fill
:
node
.
colour
,
opacity
:
1
,
opacity
:
1
,
fillOpacity
:
1
,
fillOpacity
:
1
,
}
}
;
node
.
labelCfg
=
{
node
.
labelCfg
=
{
position
:
'bottom'
,
position
:
'bottom'
,
};
}
}
}
node
.
style
.
keyshape
=
{
node
.
style
.
keyshape
=
{
stroke
:
node
.
colour
,
stroke
:
node
.
colour
,
fill
:
node
.
colour
,
fill
:
node
.
colour
,
opacity
:
1
,
opacity
:
1
,
fillOpacity
:
1
,
fillOpacity
:
1
,
}
};
});
console
.
log
(
expandData
.
nodes
);
var
dedupe
=
require
(
'dedupe'
);
let
newNodes
=
dedupe
([...
this
.
state
.
nodeData
.
nodes
,
...
expandData
.
nodes
]);
let
newEdges
=
dedupe
([...
this
.
state
.
nodeData
.
edges
,
...
expandData
.
edges
]);
let
arr
=
[];
})
let
arr2
=
[];
console
.
log
(
expandData
.
nodes
)
newNodes
.
forEach
((
element
)
=>
{
arr
.
push
(
element
.
id
);
var
dedupe
=
require
(
'dedupe'
)
});
let
newNodes
=
dedupe
([
newEdges
.
forEach
((
element
)
=>
{
...
this
.
state
.
nodeData
.
nodes
,
element
=
element
.
id
+
'22'
;
...
expandData
.
nodes
,
});
])
let
newEdges
=
dedupe
([
...
this
.
state
.
nodeData
.
edges
,
...
expandData
.
edges
,
])
let
arr
=
[]
let
arr2
=
[]
newNodes
.
forEach
(
element
=>
{
arr
.
push
(
element
.
id
)
})
newEdges
.
forEach
(
element
=>
{
element
=
element
.
id
+
'22'
})
this
.
setState
({
this
.
setState
({
nodeData
:
{
nodeData
:
{
...
@@ -255,83 +211,75 @@ export default class KnowledgeMap extends Component {
...
@@ -255,83 +211,75 @@ export default class KnowledgeMap extends Component {
nodes
:
newNodes
,
nodes
:
newNodes
,
edges
:
newEdges
,
edges
:
newEdges
,
},
},
})
})
;
// console.log(this.state.nodeData)
// console.log(this.state.nodeData)
}
else
{
}
else
{
message
.
error
(
res
.
data
.
msg
)
message
.
error
(
res
.
data
.
msg
)
;
}
}
})
})
.
catch
((
err
)
=>
{
.
catch
((
err
)
=>
{
console
.
error
(
err
)
console
.
error
(
err
)
;
})
})
;
}
}
;
getMapButton
=
()
=>
{
getMapButton
=
()
=>
{
let
searchData
=
this
.
state
.
searchData
let
searchData
=
this
.
state
.
searchData
;
searchData
.
id
=
null
searchData
.
id
=
null
;
this
.
setState
(()
=>
({
this
.
setState
(()
=>
({
searchData
:
searchData
,
searchData
:
searchData
,
nodeData
:
{
nodeData
:
{
nodes
:
[],
nodes
:
[],
edges
:
[],
edges
:
[],
},
},
}))
}))
;
this
.
sb
()
this
.
sb
()
;
this
.
getMap
()
this
.
getMap
()
;
}
}
;
sb
=
()
=>
{
sb
=
()
=>
{
function
fun
()
{
function
fun
()
{
var
a
=
5
var
a
=
5
;
function
getA
()
{
function
getA
()
{
return
a
return
a
;
}
}
return
getA
return
getA
;
}
}
var
f
=
fun
()
var
f
=
fun
()
;
f
()
f
()
;
}
}
;
onChange
=
(
checkedValues
)
=>
{
onChange
=
(
checkedValues
)
=>
{
let
searchData
=
this
.
state
.
searchData
let
searchData
=
this
.
state
.
searchData
;
searchData
.
type_list
=
checkedValues
.
toString
()
searchData
.
type_list
=
checkedValues
.
toString
()
;
// console.log(checkedValues.toString())
// console.log(checkedValues.toString())
this
.
setState
({
this
.
setState
({
checkedList
:
checkedValues
,
checkedList
:
checkedValues
,
searchData
:
searchData
,
searchData
:
searchData
,
})
})
;
}
}
;
handleChange
=
(
menuItem
,
menuData
)
=>
{
handleChange
=
(
menuItem
,
menuData
)
=>
{
// console.log(menuItem)
// console.log(menuItem)
// console.log(menuData)
// console.log(menuData)
if
(
menuItem
.
key
===
'details'
)
{
if
(
menuItem
.
key
===
'details'
)
{
this
.
setState
(()
=>
({
modelData
:
menuData
.
data
}));
this
.
setState
(()
=>
({
modelData
:
menuData
.
data
}))
}
else
{
}
else
{
// console.log(menuData)
// console.log(menuData)
let
searchData
=
this
.
state
.
searchData
let
searchData
=
this
.
state
.
searchData
;
searchData
.
id
=
menuData
.
id
searchData
.
id
=
menuData
.
id
;
this
.
getMap
()
this
.
getMap
();
}
}
}
};
getInputValue
=
(
e
)
=>
{
getInputValue
=
(
e
)
=>
{
const
{
value
}
=
e
.
target
const
{
value
}
=
e
.
target
;
let
searchData
=
this
.
state
.
searchData
let
searchData
=
this
.
state
.
searchData
;
searchData
.
data
=
value
searchData
.
data
=
value
;
this
.
setState
(()
=>
({
searchData
:
searchData
}))
this
.
setState
(()
=>
({
searchData
:
searchData
}));
}
};
render
()
{
render
()
{
const
{
const
{
classList
,
childClassList
,
allClassList
,
nodeData
,
modelData
,
optionsEdge
}
=
this
.
state
;
classList
,
childClassList
,
allClassList
,
nodeData
,
modelData
,
optionsEdge
,
}
=
this
.
state
// const data1 = Utils.mock(5)
// const data1 = Utils.mock(5)
// .circle()
// .circle()
// .graphin()
// .graphin()
...
@@ -343,13 +291,13 @@ export default class KnowledgeMap extends Component {
...
@@ -343,13 +291,13 @@ export default class KnowledgeMap extends Component {
const
defSpreingLen
=
(
_edge
,
source
,
target
)
=>
{
const
defSpreingLen
=
(
_edge
,
source
,
target
)
=>
{
/** 默认返回的是 200 的弹簧长度 */
/** 默认返回的是 200 的弹簧长度 */
/** 如果你要想要产生聚类的效果,可以考虑 根据边两边节点的度数来动态设置边的初始化长度:度数越小,则边越短 */
/** 如果你要想要产生聚类的效果,可以考虑 根据边两边节点的度数来动态设置边的初始化长度:度数越小,则边越短 */
const
nodeSize
=
30
const
nodeSize
=
30
;
const
Sdegree
=
source
.
data
.
layout
.
degree
const
Sdegree
=
source
.
data
.
layout
.
degree
;
const
Tdegree
=
target
.
data
.
layout
.
degree
const
Tdegree
=
target
.
data
.
layout
.
degree
;
const
minDegree
=
Math
.
min
(
Sdegree
,
Tdegree
)
const
minDegree
=
Math
.
min
(
Sdegree
,
Tdegree
)
;
// console.log(minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize)
// console.log(minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize)
return
minDegree
<
3
?
nodeSize
*
5
:
minDegree
*
nodeSize
return
minDegree
<
3
?
nodeSize
*
5
:
minDegree
*
nodeSize
;
}
}
;
const
options
=
[
const
options
=
[
// {
// {
...
@@ -367,88 +315,72 @@ export default class KnowledgeMap extends Component {
...
@@ -367,88 +315,72 @@ export default class KnowledgeMap extends Component {
// icon: <ExpandAltOutlined />,
// icon: <ExpandAltOutlined />,
name
:
'扩散'
,
name
:
'扩散'
,
},
},
]
]
;
const
CanvasMenu
=
()
=>
{
const
CanvasMenu
=
()
=>
{
const
{
graph
,
contextmenu
}
=
React
.
useContext
(
GraphinContext
)
const
{
graph
,
contextmenu
}
=
React
.
useContext
(
GraphinContext
)
;
const
context
=
contextmenu
.
canvas
const
context
=
contextmenu
.
canvas
;
const
handleDownload
=
()
=>
{
const
handleDownload
=
()
=>
{
graph
.
downloadFullImage
(
'canvas-contextmenu'
)
graph
.
downloadFullImage
(
'canvas-contextmenu'
)
;
context
.
handleClose
()
context
.
handleClose
()
;
}
}
;
const
handleClear
=
()
=>
{
const
handleClear
=
()
=>
{
message
.
info
(
`清除画布成功`
)
message
.
info
(
`清除画布成功`
)
;
context
.
handleClose
()
context
.
handleClose
()
;
}
}
;
const
handleStopLayout
=
()
=>
{
const
handleStopLayout
=
()
=>
{
message
.
info
(
`停止布局成功`
)
message
.
info
(
`停止布局成功`
)
;
context
.
handleClose
()
context
.
handleClose
()
;
}
}
;
return
(
return
(
<
Menu
bindType
=
"canvas"
>
<
Menu
bindType
=
'canvas'
>
{
/* <Menu.Item onClick={handleClear}>清除画布</Menu.Item>
{
/* <Menu.Item onClick={handleClear}>清除画布</Menu.Item>
<Menu.Item onClick={handleStopLayout}>停止布局</Menu.Item>
<Menu.Item onClick={handleStopLayout}>停止布局</Menu.Item>
<Menu.Item onClick={handleDownload}>下载画布</Menu.Item> */
}
<Menu.Item onClick={handleDownload}>下载画布</Menu.Item> */
}
<
/Menu
>
<
/Menu
>
)
)
;
}
}
;
return
(
return
(
<
div
className
=
"KnowledgeMap-div"
>
<
div
className
=
'KnowledgeMap-div'
>
<
div
className
=
"KnowledgeMap-left-div"
>
<
div
className
=
'KnowledgeMap-left-div'
>
<
Card
hoverable
style
=
{{
width
:
'100%'
}}
>
<
Card
hoverable
style
=
{{
width
:
'100%'
}}
>
<
Animate
transitionName
=
"fade"
transitionAppear
>
<
Animate
transitionName
=
'fade'
transitionAppear
>
{
this
.
state
.
show
?
(
{
this
.
state
.
show
?
(
<
Form
onSubmit
=
{
this
.
handleSubmit
}
className
=
"login-form"
>
<
Form
onSubmit
=
{
this
.
handleSubmit
}
className
=
'login-form'
>
<
Form
.
Item
>
<
Form
.
Item
>
<
Select
<
Select
placeholder
=
'请选择'
style
=
{{
width
:
270
}}
size
=
'large'
onChange
=
{
this
.
getClassData
}
>
placeholder
=
"请选择"
style
=
{{
width
:
270
}}
size
=
"large"
onChange
=
{
this
.
getClassData
}
>
{
classList
.
map
((
item
,
index
)
=>
{
{
classList
.
map
((
item
,
index
)
=>
{
return
(
return
(
<
Option
key
=
{
index
}
value
=
{
item
.
name
}
>
<
Option
key
=
{
index
}
value
=
{
item
.
name
}
>
{
item
.
name
}
{
item
.
name
}
<
/Option
>
<
/Option
>
)
)
;
})}
})}
<
/Select
>
<
/Select
>
<
/Form.Item
>
<
/Form.Item
>
<
Form
.
Item
>
<
Form
.
Item
>
<
Select
<
Select
placeholder
=
'请选择'
style
=
{{
width
:
270
}}
size
=
'large'
onChange
=
{
this
.
childClassChange
}
>
placeholder
=
"请选择"
style
=
{{
width
:
270
}}
size
=
"large"
onChange
=
{
this
.
childClassChange
}
>
{
childClassList
.
map
((
item
,
index
)
=>
{
{
childClassList
.
map
((
item
,
index
)
=>
{
return
(
return
(
<
Option
key
=
{
index
}
value
=
{
item
.
name
}
>
<
Option
key
=
{
index
}
value
=
{
item
.
name
}
>
{
item
.
name
}
{
item
.
name
}
<
/Option
>
<
/Option
>
)
)
;
})}
})}
<
/Select
>
<
/Select
>
<
/Form.Item
>
<
/Form.Item
>
<
Form
.
Item
>
<
Form
.
Item
>
<
Input
<
Input
placeholder
=
'请输入'
size
=
'large'
onChange
=
{
this
.
getInputValue
}
value
=
{
this
.
state
.
searchData
.
data
}
/
>
placeholder
=
"请输入"
size
=
"large"
onChange
=
{
this
.
getInputValue
}
value
=
{
this
.
state
.
searchData
.
data
}
/
>
<
/Form.Item
>
<
/Form.Item
>
<
Checkbox
.
Group
<
Checkbox
.
Group
style
=
{{
width
:
'100%'
}}
onChange
=
{
this
.
onChange
}
value
=
{
this
.
state
.
checkedList
}
>
style
=
{{
width
:
'100%'
}}
onChange
=
{
this
.
onChange
}
value
=
{
this
.
state
.
checkedList
}
>
<
Row
>
<
Row
>
{
allClassList
.
map
((
item
,
index
)
=>
{
{
allClassList
.
map
((
item
,
index
)
=>
{
return
(
return
(
<
Col
span
=
{
16
}
key
=
{
index
}
>
<
Col
span
=
{
16
}
key
=
{
index
}
>
<
Checkbox
value
=
{
item
.
name
}
>
{
item
.
name
}
<
/Checkbox
>
<
Checkbox
value
=
{
item
.
name
}
>
{
item
.
name
}
<
/Checkbox
>
<
Button
<
Button
shape
=
"circle"
shape
=
'circle'
style
=
{{
style
=
{{
height
:
'20px'
,
height
:
'20px'
,
width
:
'20px'
,
width
:
'20px'
,
...
@@ -456,32 +388,24 @@ export default class KnowledgeMap extends Component {
...
@@ -456,32 +388,24 @@ export default class KnowledgeMap extends Component {
}}
}}
/
>
/
>
<
/Col
>
<
/Col
>
)
)
;
})}
})}
<
/Row
>
<
/Row
>
<
/Checkbox.Group
>
<
/Checkbox.Group
>
<
Form
.
Item
>
<
Form
.
Item
>
<
Button
<
Button
onClick
=
{
this
.
getMapButton
}
type
=
'primary'
htmlType
=
'submit'
className
=
'login-form-button'
>
onClick
=
{
this
.
getMapButton
}
type
=
"primary"
htmlType
=
"submit"
className
=
"login-form-button"
>
搜索
搜索
<
/Button
>
<
/Button
>
<
/Form.Item
>
<
/Form.Item
>
<
/Form
>
<
/Form
>
)
:
null
}
)
:
null
}
<
/Animate
>
<
/Animate
>
<
Button
<
Button
type
=
'primary'
htmlType
=
'submit'
className
=
'login-form-button'
onClick
=
{
this
.
onClick
}
>
type
=
"primary"
htmlType
=
"submit"
className
=
"login-form-button"
onClick
=
{
this
.
onClick
}
>
{
this
.
state
.
show
?
'收起'
:
'展开'
}
{
this
.
state
.
show
?
'收起'
:
'展开'
}
<
/Button
>
<
/Button
>
<
/Card
>
<
/Card
>
<
/div
>
<
/div
>
<
div
className
=
"KnowledgeMap-right-div"
>
<
div
className
=
'KnowledgeMap-right-div'
>
<
Graphin
<
Graphin
data
=
{
nodeData
}
data
=
{
nodeData
}
layout
=
{{
layout
=
{{
...
@@ -496,7 +420,8 @@ export default class KnowledgeMap extends Component {
...
@@ -496,7 +420,8 @@ export default class KnowledgeMap extends Component {
nodeClusterBy
:
'label'
,
// 节点聚类的映射字段
nodeClusterBy
:
'label'
,
// 节点聚类的映射字段
clusterNodeStrength
:
20
,
// 节点聚类作用力
clusterNodeStrength
:
20
,
// 节点聚类作用力
// defSpringLen: defSpreingLen,
// defSpringLen: defSpreingLen,
}}
>
}}
>
{
/* <Tooltip bindType="node" style={{ width: '200px', "background": "#fff", }} >
{
/* <Tooltip bindType="node" style={{ width: '200px', "background": "#fff", }} >
{(value) => {
{(value) => {
if (value.model) {
if (value.model) {
...
@@ -534,24 +459,18 @@ export default class KnowledgeMap extends Component {
...
@@ -534,24 +459,18 @@ export default class KnowledgeMap extends Component {
</Tooltip> */
}
</Tooltip> */
}
<
ContextMenu
style
=
{{
width
:
'80px'
}}
>
<
ContextMenu
style
=
{{
width
:
'80px'
}}
>
<
Menu
<
Menu
options
=
{
options
}
onChange
=
{
this
.
handleChange
}
bindType
=
'node'
/>
options
=
{
options
}
onChange
=
{
this
.
handleChange
}
bindType
=
"node"
/>
<
/ContextMenu
>
<
/ContextMenu
>
<
ContextMenu
style
=
{{
width
:
'80px'
}}
bindType
=
"canvas"
>
<
ContextMenu
style
=
{{
width
:
'80px'
}}
bindType
=
'canvas'
>
{
/* <CanvasMenu /> */
}
{
/* <CanvasMenu /> */
}
<
/ContextMenu
>
<
/ContextMenu
>
<
ContextMenu
<
ContextMenu
style
=
{{
width
:
'120px'
,
background
:
'#fff'
}}
bindType
=
'edge'
>
style
=
{{
width
:
'120px'
,
background
:
'#fff'
}}
bindType
=
"edge"
>
<
Menu
<
Menu
options
=
{
optionsEdge
.
map
((
item
)
=>
{
options
=
{
optionsEdge
.
map
((
item
)
=>
{
return
{
...
item
,
name
:
`
${
item
.
name
}
`
}
return
{
...
item
,
name
:
`
${
item
.
name
}
`
}
;
})}
})}
onChange
=
{
this
.
handleChange
}
onChange
=
{
this
.
handleChange
}
bindType
=
"edge"
bindType
=
'edge'
/>
/>
<
/ContextMenu
>
<
/ContextMenu
>
{
/* <Tooltip bindType="edge" style={{ "background": "#fff", }} >
{
/* <Tooltip bindType="edge" style={{ "background": "#fff", }} >
...
@@ -579,82 +498,58 @@ export default class KnowledgeMap extends Component {
...
@@ -579,82 +498,58 @@ export default class KnowledgeMap extends Component {
</Tooltip> */
}
</Tooltip> */
}
<
/Graphin
>
<
/Graphin
>
<
/div
>
<
/div
>
<
div
className
=
"KnowledgeMap-details-div"
>
<
div
className
=
'KnowledgeMap-details-div'
>
<
Card
hoverable
style
=
{{
width
:
'100%'
}}
>
<
Card
hoverable
style
=
{{
width
:
'100%'
}}
>
<
Animate
transitionName
=
"fade"
transitionAppear
>
<
Animate
transitionName
=
'fade'
transitionAppear
>
{
this
.
state
.
show2
{
this
.
state
.
show2
?
Object
.
keys
(
modelData
).
map
((
item
,
index
)
=>
{
?
Object
.
keys
(
modelData
).
map
((
item
,
index
)
=>
{
if
(
item
!=
'smiles'
)
{
if
(
item
!=
'smiles'
)
{
return
(
return
(
<
div
key
=
{
index
}
>
<
div
key
=
{
index
}
>
<
span
className
=
"left-title"
>
{
item
}:
<
/span
>
<
span
className
=
'left-title'
>
{
item
}:
<
/span
>
{
{
typeof
modelData
[
item
]
===
'object'
&&
typeof
modelData
[
item
]
===
'object'
&&
modelData
[
item
]
!=
null
&&
modelData
[
item
]
!=
null
&&
modelData
[
item
].
map
((
item2
,
index
)
=>
{
modelData
[
item
].
map
((
item2
,
index
)
=>
{
if
(
item
==
'reference'
)
{
if
(
item
==
'reference'
)
{
return
(
return
(
<
Tag
<
Tag
color
=
"blue"
color
=
'blue'
style
=
{
style
=
{{
{
wordWrap
:
'break-word'
,
wordWrap
:
'break-word'
,
wordBreak
:
'normal'
wordBreak
:
'normal'
,
}
}}
}
onClick
=
{()
=>
{
onClick
=
{()
=>
{
this
.
getReferences2
(
item2
)
this
.
getReferences2
(
item2
);
}}
>
}}
>
{
item2
}
{
item2
}
<
/Tag
>
<
/Tag
>
)
);
}
else
{
}
else
{
return
(
return
(
<
span
<
span
color
=
"blue"
color
=
'blue'
onClick
=
{()
=>
{
onClick
=
{()
=>
{
this
.
getReferences2
(
item2
)
this
.
getReferences2
(
item2
);
}}
>
}}
>
{
item2
}
{
item2
}
<
/span
>
<
/span
>
)
);
}
}
})}
})
{
typeof
modelData
[
item
]
!=
'object'
&&
(
}
{
typeof
modelData
[
item
]
!=
'object'
&&
<
span
key
=
{
index
}
>
<
span
key
=
{
index
}
>
{
/* <span className="left-title">{item}: </span> */
}
{
/* <span className="left-title">{item}: </span> */
}
{
modelData
[
item
]
{
modelData
[
item
]}
}
<
/span
>
<
/span
>
)}
}
<
/div
>
<
/div
>
)
);
}
else
{
}
else
{
return
(
return
modelData
[
item
]
&&
<
Jsme
key
=
{
index
}
height
=
'150px'
width
=
''
options
=
'depict,useopenchemlib'
smiles
=
{
modelData
[
item
]}
/>
;
modelData
[
item
]
&&
(
<
Jsme
key
=
{
index
}
height
=
"150px"
width
=
""
options
=
"depict,useopenchemlib"
smiles
=
{
modelData
[
item
]}
/
>
)
)
}
}
})
})
:
null
}
:
null
}
...
@@ -662,6 +557,6 @@ export default class KnowledgeMap extends Component {
...
@@ -662,6 +557,6 @@ export default class KnowledgeMap extends Component {
<
/Card
>
<
/Card
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
)
)
;
}
}
}
}
src/routes/MolecularSearch/index.js
View file @
b890a542
import
React
,
{
Component
}
from
'react'
import
React
,
{
Component
}
from
'react'
import
{
Jsme
}
from
'jsme-react'
import
{
Jsme
}
from
'jsme-react'
import
qs
from
'qs'
import
qs
from
'qs'
import
{
request
}
from
'../../utils/request'
import
request
from
'../../utils/request'
import
{
Input
,
Button
,
Modal
,
Table
,
message
,
Pagination
}
from
'antd'
;
import
{
Input
,
Button
,
Modal
,
Table
,
message
,
Pagination
}
from
'antd'
;
import
Molstar
from
"molstar-react"
;
import
Molstar
from
"molstar-react"
;
import
'./index.css'
import
'./index.css'
...
...
src/utils/request.js
View file @
b890a542
import
axios
from
'axios'
import
axios
from
'axios'
;
axios
.
defaults
.
timeout
=
15000
import
{
getQueryString
}
from
'./utils'
;
//禁用F12功能
document
.
onkeydown
=
function
()
{
function
disableF12
()
{
var
e
=
window
.
event
||
arguments
[
0
]
document
.
onkeydown
=
function
()
{
var
e
=
window
.
event
||
arguments
[
0
];
if
(
e
.
keyCode
==
123
)
{
if
(
e
.
keyCode
==
123
)
{
return
false
return
false
;
}
else
if
(
e
.
ctrlKey
&&
e
.
shiftKey
&&
e
.
keyCode
==
73
)
{
}
else
if
(
e
.
ctrlKey
&&
e
.
shiftKey
&&
e
.
keyCode
==
73
)
{
return
false
return
false
;
}
}
};
//禁用鼠标右键
document
.
oncontextmenu
=
function
()
{
return
false
;
};
}
}
document
.
oncontextmenu
=
function
()
{
// disableF12();
return
false
const
baseURL
=
'http://52.83.169.190:8003/'
;
const
token
=
getQueryString
(
'token'
)
||
localStorage
.
getItem
(
'token'
);
const
request
=
axios
.
create
({
baseURL
,
timeout
:
15000
,
headers
:
{
accessToken
:
token
,
},
});
function
checkToken
(
config
)
{
request
.
get
(
'http://69.235.144.91:8048/yszh-login/auth/checkToken'
)
.
then
((
res
)
=>
{
console
.
log
(
res
);
if
(
res
.
data
.
code
===
200
)
{
console
.
log
(
'token 检验通过'
);
return
config
;
}
else
{
console
.
log
(
'token校验没通过 返回登录页'
);
localStorage
.
removeItem
(
'token'
);
// window.open('http://localhost:3000/#/login', '_self');
window
.
open
(
'http://69.235.144.91:3048/#/login'
,
'_self'
);
}
})
.
catch
((
err
)
=>
{
localStorage
.
removeItem
(
'token'
);
window
.
open
(
'http://69.235.144.91:3048/#/login'
,
'_self'
);
console
.
log
(
'err'
,
err
);
});
}
}
export
const
request
=
axios
.
create
({
checkToken
();
baseURL
:
'http://52.83.169.190:8003/'
,
})
//拦截器
request
.
interceptors
.
request
.
use
((
config
)
=>
{
console
.
log
(
'token---'
,
'拦截器方法校验token'
);
console
.
log
(
config
);
// alert('拦截器..');
if
(
!!
token
)
{
checkToken
(
config
);
}
else
{
console
.
log
(
'token为空....'
);
// alert('token为空..');
localStorage
.
removeItem
(
'token'
);
window
.
open
(
'http://69.235.144.91:3048/#/login'
,
'_self'
);
}
// return config;
});
request
.
interceptors
.
response
.
use
(
(
res
)
=>
{
return
res
.
data
;
},
(
err
)
=>
{
if
(
err
&&
err
.
response
)
{
switch
(
err
.
response
.
status
)
{
case
400
:
console
.
log
(
'请求错误'
);
break
;
case
401
:
console
.
log
(
'未授权访问'
);
break
;
case
404
:
console
.
log
(
'页面未找到'
);
break
;
default
:
console
.
log
(
'其他错误信息'
);
}
}
return
err
;
}
);
export
default
request
;
src/utils/utils.js
View file @
b890a542
...
@@ -2,9 +2,9 @@ function accMul(arg1, arg2) {
...
@@ -2,9 +2,9 @@ function accMul(arg1, arg2) {
let
m
=
0
;
let
m
=
0
;
const
s1
=
arg1
.
toString
();
const
s1
=
arg1
.
toString
();
const
s2
=
arg2
.
toString
();
const
s2
=
arg2
.
toString
();
m
+=
s1
.
split
(
"."
).
length
>
1
?
s1
.
split
(
"."
)[
1
].
length
:
0
;
m
+=
s1
.
split
(
'.'
).
length
>
1
?
s1
.
split
(
'.'
)[
1
].
length
:
0
;
m
+=
s2
.
split
(
"."
).
length
>
1
?
s2
.
split
(
"."
)[
1
].
length
:
0
;
m
+=
s2
.
split
(
'.'
).
length
>
1
?
s2
.
split
(
'.'
)[
1
].
length
:
0
;
return
Number
(
s1
.
replace
(
"."
,
""
))
*
Number
(
s2
.
replace
(
"."
,
""
))
/
10
**
m
;
return
(
Number
(
s1
.
replace
(
'.'
,
''
))
*
Number
(
s2
.
replace
(
'.'
,
''
)
))
/
10
**
m
;
}
}
export
function
digitUppercase
(
n
)
{
export
function
digitUppercase
(
n
)
{
...
@@ -33,7 +33,6 @@ export function digitUppercase(n) {
...
@@ -33,7 +33,6 @@ export function digitUppercase(n) {
.
replace
(
/^整$/
,
'零元整'
);
.
replace
(
/^整$/
,
'零元整'
);
}
}
/**
/**
* 生成指定区间的随机整数
* 生成指定区间的随机整数
* @param min
* @param min
...
@@ -49,8 +48,8 @@ export function randomNum(min, max) {
...
@@ -49,8 +48,8 @@ export function randomNum(min, max) {
* @param str
* @param str
* @returns {number}
* @returns {number}
*/
*/
export
function
calculateWidth
(
arr
){
export
function
calculateWidth
(
arr
)
{
return
30
+
arr
[
0
].
length
*
15
return
30
+
arr
[
0
].
length
*
15
;
}
}
/**
/**
...
@@ -59,8 +58,21 @@ export function calculateWidth(arr){
...
@@ -59,8 +58,21 @@ export function calculateWidth(arr){
* @constructor
* @constructor
*/
*/
export
function
preloadingImages
(
arr
)
{
export
function
preloadingImages
(
arr
)
{
arr
.
forEach
(
item
=>
{
arr
.
forEach
((
item
)
=>
{
const
img
=
new
Image
()
const
img
=
new
Image
();
img
.
src
=
item
img
.
src
=
item
;
})
});
}
/**
* 获取URL中指定的参数
*/
export
function
getQueryString
(
name
)
{
let
reg
=
new
RegExp
(
'(^|&)'
+
name
+
'=([^&]*)(&|$)'
,
'i'
);
let
r
=
window
.
location
.
hash
.
split
(
'?'
)[
1
]
&&
window
.
location
.
hash
.
split
(
'?'
)[
1
].
match
(
reg
);
//获取url中"?"符后的字符串并正则匹配
let
context
=
''
;
if
(
r
!=
null
)
context
=
decodeURIComponent
(
r
[
2
]);
reg
=
null
;
r
=
null
;
return
context
==
null
||
context
==
''
||
context
==
'undefined'
?
''
:
context
;
}
}
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