Skip to content

K
KnowledgeMap
Commit b890a542 by wangshufen
Options

feature:登录功能添加token校验

parent c734ee43
Showing with 565 additions and 624 deletions
.eslintrc.js 0 → 100644
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
{
"compilerOptions": {
"baseUrl": "./",
"experimentalDecorators": true,
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", ".vscode", "library", "local", "settings", "temp", "build"]
}
src/routes/Home/IndicationDetails/index.js
import React, { Component } from 'react'
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 qs from 'qs'
const { Title } = Typography
......
src/routes/Home/LigandDetails/index.js
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 { request } from '../../../utils/request'
import request from '../../../utils/request'
import Molstar from "molstar-react"
import { Jsme } from 'jsme-react'
import qs from 'qs'
......
src/routes/Home/MutationDetails/index.js
......@@ -18,7 +18,7 @@ import {
Anchor,
Pagination
} from 'antd'
import { request } from '../../../utils/request'
import request from '../../../utils/request'
import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react'
import qs from 'qs'
......
src/routes/Home/SearchDetails/index.js
......@@ -18,7 +18,7 @@ import {
Pagination,
Anchor
} from 'antd'
import { request } from '../../../utils/request'
import request from '../../../utils/request'
import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react'
import qs from 'qs'
......
src/routes/Home/SearchList/index.js
import React, { Component } from 'react'
import { Jsme } from 'jsme-react'
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 './index.css'
const { TabPane } = Tabs
......
src/routes/Home/TargetDetails/index.js
......@@ -21,7 +21,7 @@ import {
Anchor,
Pagination
} from 'antd'
import { request } from '../../../utils/request'
import request from '../../../utils/request'
import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react'
import qs from 'qs'
......
src/routes/Home/index.js
......@@ -14,7 +14,7 @@ import {
import LogoTitlte from '../../components/LogoTitlte/index'
import { Jsme } from 'jsme-react'
import qs from 'qs'
import { request } from '../../utils/request'
import request from '../../utils/request'
import './style.css'
const { TabPane } = Tabs
const { Option } = Select
......
src/routes/KnowledgeMap/index.js
import React, { Component } from 'react'
import { Jsme } from 'jsme-react'
import qs from 'qs'
import { request } from '../../utils/request'
import Graphin, { GraphinContext, Components, Utils } from '@antv/graphin'
import { ContextMenu, } from '@antv/graphin-components'
import Animate from 'rc-animate'
import { ContextMenuValue } from '@antv/graphin'
import { TooltipValue } from '@antv/graphin'
import {
Select,
message,
Form,
Button,
Input,
Checkbox,
Row,
Col,
Card,
} from 'antd'
import './index.css'
const { Option } = Select
const { Menu } = ContextMenu
const { Tooltip } = Components
import React, { Component } from 'react';
import { Jsme } from 'jsme-react';
import qs from 'qs';
import request from '../../utils/request';
import Graphin, { GraphinContext, Components, Utils } from '@antv/graphin';
import { ContextMenu } from '@antv/graphin-components';
import Animate from 'rc-animate';
import { ContextMenuValue } from '@antv/graphin';
import { TooltipValue } from '@antv/graphin';
import { Select, message, Form, Button, 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 {
state = {
......@@ -36,91 +26,84 @@ export default class KnowledgeMap extends Component {
property: 'chembl_id',
data: 'CHEMBL1921',
id: null,
type_list: ''
type_list: '',
},
typeList: [],
nodeData: {
nodes: [],
edges: []
edges: [],
},
checkedList: []
}
componentDidMount () {
this.getSelectList()
checkedList: [],
};
componentDidMount() {
this.getSelectList();
}
onClick = () => {
this.setState({
show: !this.state.show,
})
}
});
};
toggleCollapsed = () => {
this.setState({
collapsed: !this.state.collapsed,
})
}
});
};
childClassChange = (e) => {
let searchData = this.state.searchData
searchData.property = e
this.setState(() => ({ searchData: searchData }))
}
let searchData = this.state.searchData;
searchData.property = e;
this.setState(() => ({ searchData: searchData }));
};
getClassData = (e) => {
console.log(e)
let searchData = this.state.searchData
searchData.label = e
let classList = this.state.classList
let childData = []
classList.forEach(
item => {
if (e === item.name) {
childData = item.content
}
console.log(e);
let searchData = this.state.searchData;
searchData.label = e;
let classList = this.state.classList;
let childData = [];
classList.forEach((item) => {
if (e === item.name) {
childData = item.content;
}
)
});
this.setState({ childClassList: childData })
}
this.setState({ childClassList: childData });
};
getSelectList = () => {
request
.get('kg/title')
.then((res) => {
if (res.data.code === 200) {
let searchData = this.state.searchData
searchData.type_list = res.data.data.type_list.toString()
this.setState({
classList: res.data.data.all_class,
allClassList: res.data.data.type_list,
checkedList: res.data.data.type_list,
searchData: searchData
})
} else {
message.error(res.data.msg)
}
})
.catch((err) => {
console.error(err)
})
}
localStorage.getItem('token') &&
request
.get('kg/title')
.then((res) => {
if (res.data.code === 200) {
let searchData = this.state.searchData;
searchData.type_list = res.data.data.type_list.toString();
this.setState({
classList: res.data.data.all_class,
allClassList: res.data.data.type_list,
checkedList: res.data.data.type_list,
searchData: searchData,
});
} else {
message.error(res.data.msg);
}
})
.catch((err) => {
console.error(err);
});
};
getMap = () => {
request
.post('kg/search', qs.stringify(this.state.searchData))
.then((res) => {
if (res.data.code === 200) {
const expandData = res.data.data
expandData.edges.forEach(edge => {
edge.style = {
}
const expandData = res.data.data;
expandData.edges.forEach((edge) => {
edge.style = {};
edge.style.label = {
value: edge.name,
}
})
console.log(this.state.nodeData)
};
});
console.log(this.state.nodeData);
// this.setState({
// nodeData: res.data.data
......@@ -131,43 +114,37 @@ export default class KnowledgeMap extends Component {
nodes: [...this.state.nodeData.nodes, ...expandData.nodes],
edges: [...this.state.nodeData.edges, ...expandData.edges],
},
})
});
} else {
message.error(res.data.msg)
message.error(res.data.msg);
}
})
.catch((err) => {
console.error(err)
})
}
console.error(err);
});
};
getMapButton = () => {
let searchData = this.state.searchData
searchData.id = null
this.setState(() => ({ searchData: searchData }))
this.getMap()
}
let searchData = this.state.searchData;
searchData.id = null;
this.setState(() => ({ searchData: searchData }));
this.getMap();
};
onChange = (checkedValues) => {
let searchData = this.state.searchData
let searchData = this.state.searchData;
searchData.type_list = checkedValues.toString()
console.log(checkedValues.toString())
searchData.type_list = checkedValues.toString();
console.log(checkedValues.toString());
this.setState({
checkedList: checkedValues,
searchData: searchData
})
}
searchData: searchData,
});
};
handleChange = (menuItem, menuData) => {
console.log(menuItem)
console.log(menuData)
let searchData = this.state.searchData
searchData.id = menuData.id
this.getMap()
console.log(menuItem);
console.log(menuData);
let searchData = this.state.searchData;
searchData.id = menuData.id;
this.getMap();
// message.info(`元素：${menuData.id}，动作：${menuItem.name}`)
// console.log(menuItem, menuData)
......@@ -187,7 +164,6 @@ export default class KnowledgeMap extends Component {
// value: `${source}->${target}`,
// }
// })
// this.setState({
// nodeData: {
......@@ -196,18 +172,16 @@ export default class KnowledgeMap extends Component {
// edges: [...this.state.nodeData.edges, ...expandData.edges],
// },
// })
}
};
getInputValue = (e) => {
const { value } = e.target
let searchData = this.state.searchData
searchData.data = value
this.setState(() => ({ searchData: searchData }))
}
render () {
const { classList, childClassList, allClassList, nodeData } = this.state
const { value } = e.target;
let searchData = this.state.searchData;
searchData.data = value;
this.setState(() => ({ searchData: searchData }));
};
render() {
const { classList, childClassList, allClassList, nodeData } = this.state;
// const data1 = Utils.mock(5)
// .circle()
// .graphin()
......@@ -219,13 +193,13 @@ export default class KnowledgeMap extends Component {
const defSpreingLen = (_edge, source, target) => {
/** 默认返回的是 200 的弹簧长度 */
/** 如果你要想要产生聚类的效果，可以考虑 根据边两边节点的度数来动态设置边的初始化长度：度数越小，则边越短 */
const nodeSize = 30
const Sdegree = source.data.layout.degree
const Tdegree = target.data.layout.degree
const minDegree = Math.min(Sdegree, Tdegree)
console.log(minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize)
return minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize
}
const nodeSize = 30;
const Sdegree = source.data.layout.degree;
const Tdegree = target.data.layout.degree;
const minDegree = Math.min(Sdegree, Tdegree);
console.log(minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize);
return minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize;
};
const options = [
// {
......@@ -243,117 +217,88 @@ export default class KnowledgeMap extends Component {
// icon: <ExpandAltOutlined />,
name: '扩散',
},
]
];
const CanvasMenu = () => {
const { graph, contextmenu } = React.useContext(GraphinContext)
const context = contextmenu.canvas
const { graph, contextmenu } = React.useContext(GraphinContext);
const context = contextmenu.canvas;
const handleDownload = () => {
graph.downloadFullImage('canvas-contextmenu')
context.handleClose()
}
graph.downloadFullImage('canvas-contextmenu');
context.handleClose();
};
const handleClear = () => {
message.info(`清除画布成功`)
context.handleClose()
}
message.info(`清除画布成功`);
context.handleClose();
};
const handleStopLayout = () => {
message.info(`停止布局成功`)
context.handleClose()
}
message.info(`停止布局成功`);
context.handleClose();
};
return (
<Menu bindType="canvas">
<Menu bindType='canvas'>
{/* <Menu.Item onClick={handleClear}>清除画布</Menu.Item>
<Menu.Item onClick={handleStopLayout}>停止布局</Menu.Item>
<Menu.Item onClick={handleDownload}>下载画布</Menu.Item> */}
</Menu>
)
}
);
};
return (
<div className="KnowledgeMap-div">
<div className="KnowledgeMap-left-div">
<div className='KnowledgeMap-div'>
<div className='KnowledgeMap-left-div'>
<Card hoverable style={{ width: '100%' }}>
<Animate transitionName="fade" transitionAppear>
<Animate transitionName='fade' transitionAppear>
{this.state.show ? (
<Form onSubmit={this.handleSubmit} className="login-form">
<Form onSubmit={this.handleSubmit} className='login-form'>
<Form.Item>
<Select
placeholder="请选择"
style={{ width: 270 }}
size="large"
onChange={this.getClassData}>
<Select placeholder='请选择' style={{ width: 270 }} size='large' onChange={this.getClassData}>
{classList.map((item, index) => {
return (
<Option key={index} value={item.name}>
{item.name}
</Option>
)
);
})}
</Select>
</Form.Item>
<Form.Item>
<Select
placeholder="请选择"
style={{ width: 270 }}
size="large"
onChange={this.childClassChange}>
<Select placeholder='请选择' style={{ width: 270 }} size='large' onChange={this.childClassChange}>
{childClassList.map((item, index) => {
return (
<Option key={index} value={item.name}>
{item.name}
</Option>
)
);
})}
</Select>
</Form.Item>
<Form.Item>
<Input placeholder="请输入"
size="large"
onChange={this.getInputValue}
value={this.state.searchData.data} />
<Input placeholder='请输入' size='large' onChange={this.getInputValue} value={this.state.searchData.data} />
</Form.Item>
<Checkbox.Group
style={{ width: '100%' }}
onChange={this.onChange}
value={this.state.checkedList}
>
<Checkbox.Group style={{ width: '100%' }} onChange={this.onChange} value={this.state.checkedList}>
<Row>
{
allClassList.map((item, index) => {
return (
<Col span={16} key={index}>
<Checkbox value={item}>{item}</Checkbox>
</Col>
)
})
}
{allClassList.map((item, index) => {
return (
<Col span={16} key={index}>
<Checkbox value={item}>{item}</Checkbox>
</Col>
);
})}
</Row>
</Checkbox.Group>
<Form.Item>
<Button
onClick={this.getMapButton}
type="primary"
htmlType="submit"
className="login-form-button">
<Button onClick={this.getMapButton} type='primary' htmlType='submit' className='login-form-button'>
搜索
</Button>
</Form.Item>
</Form>
) : null}
</Animate>
<Button
type="primary"
htmlType="submit"
className="login-form-button"
onClick={this.onClick}>
<Button type='primary' htmlType='submit' className='login-form-button' onClick={this.onClick}>
{this.state.show ? '收起' : '展开'}
</Button>
</Card>
</div>
<div className="KnowledgeMap-right-div">
<div className='KnowledgeMap-right-div'>
<Graphin
data={nodeData}
layout={{
......@@ -363,87 +308,69 @@ export default class KnowledgeMap extends Component {
},
animation: true,
// defSpringLen: defSpreingLen,
}}>
<Tooltip bindType="node" style={{ width: '200px' }} >
}}
>
<Tooltip bindType='node' style={{ width: '200px' }}>
{(value) => {
if (value.model) {
const { model } = value
const { model } = value;
return (
<div >
{
Object.keys(model.data).map((item, index) => {
if (item != 'smiles') {
return (
<div key={index}>
{item}:{model.data[item]}
</div>
)
}
else {
return (
<Jsme key={index} height="150px" width="" options="depict,useopenchemlib" smiles={model.data[item]} />
)
}
})
}
<div>
{Object.keys(model.data).map((item, index) => {
if (item != 'smiles') {
return (
<div key={index}>
{item}:{model.data[item]}
</div>
);
} else {
return <Jsme key={index} height='150px' width='' options='depict,useopenchemlib' smiles={model.data[item]} />;
}
})}
</div>
)
);
}
return null
return null;
}}
</Tooltip>
<ContextMenu style={{ width: '80px' }}>
<Menu
options={options}
onChange={this.handleChange}
bindType="node"
/>
<Menu options={options} onChange={this.handleChange} bindType='node' />
</ContextMenu>
<ContextMenu style={{ width: '80px' }} bindType="canvas">
<ContextMenu style={{ width: '80px' }} bindType='canvas'>
<CanvasMenu />
</ContextMenu>
<ContextMenu style={{ width: '120px' }} bindType="edge">
<ContextMenu style={{ width: '120px' }} bindType='edge'>
<Menu
options={options.map((item) => {
return { ...item, name: `${item.name}-EDGE` }
return { ...item, name: `${item.name}-EDGE` };
})}
onChange={this.handleChange}
bindType="edge"
bindType='edge'
/>
</ContextMenu>
<Tooltip bindType="edge">
<Tooltip bindType='edge'>
{(value) => {
if (value.model) {
const { model } = value
const { model } = value;
return (
<div >
{
Object.keys(model.data).map((item, index) => {
return (
<div key={index}>
{item}:{model.data[item]}
</div>
)
})
}
<div>
{Object.keys(model.data).map((item, index) => {
return (
<div key={index}>
{item}:{model.data[item]}
</div>
);
})}
</div>
)
);
}
return null
return null;
}}
</Tooltip>
</Graphin>
</div>
</div >
)
</div>
);
}
}
src/routes/Login/LoginForm.js
......@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom'
import { inject, observer } from 'mobx-react/index'
import { Form, Input, message } from 'antd'
import PromptBox from '../../components/PromptBox'
import { request } from '../../utils/request'
import request from '../../utils/request'
import qs from 'qs'
import md5 from 'js-md5'
......
src/routes/Login/index.js
import React, { Component } from 'react'
import { Jsme } from 'jsme-react'
import qs from 'qs'
import { request } from '../../utils/request'
import Graphin, { GraphinContext, Components, Utils } from '@antv/graphin'
import { ContextMenu } from '@antv/graphin-components'
import Animate from 'rc-animate'
import { ContextMenuValue } from '@antv/graphin'
import React, { Component } from 'react';
import { Jsme } from 'jsme-react';
import qs from 'qs';
import request from '../../utils/request';
import Graphin, { GraphinContext, Components, Utils } from '@antv/graphin';
import { ContextMenu } from '@antv/graphin-components';
import Animate from 'rc-animate';
import { ContextMenuValue } from '@antv/graphin';
// import { TooltipValue } from '@antv/graphin'
import {
Select,
message,
Form,
Button,
Input,
Checkbox,
Row,
Col,
Card,
Tag,
} from 'antd'
import './index.css'
const { Option } = Select
const { Menu } = ContextMenu
import { Select, message, Form, Button, Input, Checkbox, Row, Col, Card, Tag } from 'antd';
import './index.css';
const { Option } = Select;
const { Menu } = ContextMenu;
// const { Tooltip } = Components
export default class KnowledgeMap extends Component {
......@@ -54,200 +43,167 @@ export default class KnowledgeMap extends Component {
name: '详情',
},
],
}
componentDidMount () {
this.getSelectList()
};
componentDidMount() {
this.getSelectList();
}
onClick = () => {
this.setState({
show: !this.state.show,
})
}
});
};
getReferences2 = (e) => {
window.open(e)
}
window.open(e);
};
toggleCollapsed = () => {
this.setState({
collapsed: !this.state.collapsed,
})
}
});
};
childClassChange = (e) => {
let searchData = this.state.searchData
searchData.property = e
this.setState(() => ({ searchData: searchData }))
}
let searchData = this.state.searchData;
searchData.property = e;
this.setState(() => ({ searchData: searchData }));
};
getClassData = (e) => {
// console.log(e)
let searchData = this.state.searchData
searchData.label = e
let classList = this.state.classList
let childData = []
let searchData = this.state.searchData;
searchData.label = e;
let classList = this.state.classList;
let childData = [];
classList.forEach((item) => {
if (e === item.name) {
childData = item.content
childData = item.content;
}
})
});
this.setState({ childClassList: childData })
}
this.setState({ childClassList: childData });
};
getSelectList = () => {
request
.get('kg/title')
.then((res) => {
if (res.data.code === 200) {
let searchData = this.state.searchData
let typeList = []
res.data.data.type_list.forEach((item) => {
typeList.push(item.name)
})
searchData.type_list = typeList.toString()
this.setState({
classList: res.data.data.all_class,
allClassList: res.data.data.type_list,
checkedList: typeList,
searchData: searchData,
})
} else {
message.error(res.data.msg)
}
})
.catch((err) => {
console.error(err)
})
}
localStorage.getItem('token') &&
request
.get('kg/title')
.then((res) => {
if (res.data.code === 200) {
let searchData = this.state.searchData;
let typeList = [];
res.data.data.type_list.forEach((item) => {
typeList.push(item.name);
});
searchData.type_list = typeList.toString();
this.setState({
classList: res.data.data.all_class,
allClassList: res.data.data.type_list,
checkedList: typeList,
searchData: searchData,
});
} else {
message.error(res.data.msg);
}
})
.catch((err) => {
console.error(err);
});
};
getMap = () => {
request
.post('kg/search', qs.stringify(this.state.searchData))
.then((res) => {
if (res.data.code === 200) {
const expandData = res.data
const expandData = res.data;
expandData.edges.forEach((edge) => {
edge.style = {}
edge.style = {};
edge.style.label = {
value: edge.name,
}
edge.id = ''
})
};
edge.id = '';
});
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 = {
stroke: node.colour,
fill: node.colour,
opacity: 1,
fillOpacity: 1,
}
};
node.labelCfg = {
position: 'bottom',
}
};
}
if (node.label == "Receptor") {
node.type = 'rect'
node.size = [50, 50]
if (node.label == 'Receptor') {
node.type = 'rect';
node.size = [50, 50];
node.label = node.style.label.value
node.label = node.style.label.value;
node.style = {
stroke: node.colour,
fill: node.colour,
opacity: 1,
fillOpacity: 1,
}
};
node.labelCfg = {
position: 'bottom',
}
};
}
if (node.label == "Indication") {
node.type = 'diamond'
node.size = [60, 60]
if (node.label == 'Indication') {
node.type = 'diamond';
node.size = [60, 60];
node.label = node.style.label.value
node.label = node.style.label.value;
node.style = {
stroke: node.colour,
fill: node.colour,
opacity: 1,
fillOpacity: 1,
}
};
node.labelCfg = {
position: 'bottom',
}
};
}
if (node.label == "Mutation") {
node.type = 'triangle'
node.size = [40, 40]
if (node.label == 'Mutation') {
node.type = 'triangle';
node.size = [40, 40];
node.label = node.style.label.value
node.label = node.style.label.value;
node.style = {
stroke: node.colour,
fill: node.colour,
opacity: 1,
fillOpacity: 1,
}
};
node.labelCfg = {
position: 'bottom',
}
};
}
node.style.keyshape = {
stroke: node.colour,
fill: node.colour,
opacity: 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 = []
newNodes.forEach(element => {
arr.push(element.id)
})
newEdges.forEach(element => {
element = element.id + '22'
})
};
});
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 = [];
newNodes.forEach((element) => {
arr.push(element.id);
});
newEdges.forEach((element) => {
element = element.id + '22';
});
this.setState({
nodeData: {
......@@ -255,83 +211,75 @@ export default class KnowledgeMap extends Component {
nodes: newNodes,
edges: newEdges,
},
})
});
// console.log(this.state.nodeData)
} else {
message.error(res.data.msg)
message.error(res.data.msg);
}
})
.catch((err) => {
console.error(err)
})
}
console.error(err);
});
};
getMapButton = () => {
let searchData = this.state.searchData
searchData.id = null
let searchData = this.state.searchData;
searchData.id = null;
this.setState(() => ({
searchData: searchData,
nodeData: {
nodes: [],
edges: [],
},
}))
}));
this.sb()
this.sb();
this.getMap()
}
this.getMap();
};
sb = () => {
function fun () {
var a = 5
function getA () {
return a
function fun() {
var a = 5;
function getA() {
return a;
}
return getA
return getA;
}
var f = fun()
var f = fun();
f()
}
f();
};
onChange = (checkedValues) => {
let searchData = this.state.searchData
searchData.type_list = checkedValues.toString()
let searchData = this.state.searchData;
searchData.type_list = checkedValues.toString();
// console.log(checkedValues.toString())
this.setState({
checkedList: checkedValues,
searchData: searchData,
})
}
});
};
handleChange = (menuItem, menuData) => {
// console.log(menuItem)
// console.log(menuData)
if (menuItem.key === 'details') {
this.setState(() => ({ modelData: menuData.data }))
this.setState(() => ({ modelData: menuData.data }));
} else {
// console.log(menuData)
let searchData = this.state.searchData
searchData.id = menuData.id
this.getMap()
let searchData = this.state.searchData;
searchData.id = menuData.id;
this.getMap();
}
}
};
getInputValue = (e) => {
const { value } = e.target
let searchData = this.state.searchData
searchData.data = value
this.setState(() => ({ searchData: searchData }))
}
render () {
const {
classList,
childClassList,
allClassList,
nodeData,
modelData,
optionsEdge,
} = this.state
const { value } = e.target;
let searchData = this.state.searchData;
searchData.data = value;
this.setState(() => ({ searchData: searchData }));
};
render() {
const { classList, childClassList, allClassList, nodeData, modelData, optionsEdge } = this.state;
// const data1 = Utils.mock(5)
// .circle()
// .graphin()
......@@ -343,13 +291,13 @@ export default class KnowledgeMap extends Component {
const defSpreingLen = (_edge, source, target) => {
/** 默认返回的是 200 的弹簧长度 */
/** 如果你要想要产生聚类的效果，可以考虑 根据边两边节点的度数来动态设置边的初始化长度：度数越小，则边越短 */
const nodeSize = 30
const Sdegree = source.data.layout.degree
const Tdegree = target.data.layout.degree
const minDegree = Math.min(Sdegree, Tdegree)
const nodeSize = 30;
const Sdegree = source.data.layout.degree;
const Tdegree = target.data.layout.degree;
const minDegree = Math.min(Sdegree, Tdegree);
// console.log(minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize)
return minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize
}
return minDegree < 3 ? nodeSize * 5 : minDegree * nodeSize;
};
const options = [
// {
......@@ -367,88 +315,72 @@ export default class KnowledgeMap extends Component {
// icon: <ExpandAltOutlined />,
name: '扩散',
},
]
];
const CanvasMenu = () => {
const { graph, contextmenu } = React.useContext(GraphinContext)
const context = contextmenu.canvas
const { graph, contextmenu } = React.useContext(GraphinContext);
const context = contextmenu.canvas;
const handleDownload = () => {
graph.downloadFullImage('canvas-contextmenu')
context.handleClose()
}
graph.downloadFullImage('canvas-contextmenu');
context.handleClose();
};
const handleClear = () => {
message.info(`清除画布成功`)
context.handleClose()
}
message.info(`清除画布成功`);
context.handleClose();
};
const handleStopLayout = () => {
message.info(`停止布局成功`)
context.handleClose()
}
message.info(`停止布局成功`);
context.handleClose();
};
return (
<Menu bindType="canvas">
<Menu bindType='canvas'>
{/* <Menu.Item onClick={handleClear}>清除画布</Menu.Item>
<Menu.Item onClick={handleStopLayout}>停止布局</Menu.Item>
<Menu.Item onClick={handleDownload}>下载画布</Menu.Item> */}
</Menu>
)
}
);
};
return (
<div className="KnowledgeMap-div">
<div className="KnowledgeMap-left-div">
<div className='KnowledgeMap-div'>
<div className='KnowledgeMap-left-div'>
<Card hoverable style={{ width: '100%' }}>
<Animate transitionName="fade" transitionAppear>
<Animate transitionName='fade' transitionAppear>
{this.state.show ? (
<Form onSubmit={this.handleSubmit} className="login-form">
<Form onSubmit={this.handleSubmit} className='login-form'>
<Form.Item>
<Select
placeholder="请选择"
style={{ width: 270 }}
size="large"
onChange={this.getClassData}>
<Select placeholder='请选择' style={{ width: 270 }} size='large' onChange={this.getClassData}>
{classList.map((item, index) => {
return (
<Option key={index} value={item.name}>
{item.name}
</Option>
)
);
})}
</Select>
</Form.Item>
<Form.Item>
<Select
placeholder="请选择"
style={{ width: 270 }}
size="large"
onChange={this.childClassChange}>
<Select placeholder='请选择' style={{ width: 270 }} size='large' onChange={this.childClassChange}>
{childClassList.map((item, index) => {
return (
<Option key={index} value={item.name}>
{item.name}
</Option>
)
);
})}
</Select>
</Form.Item>
<Form.Item>
<Input
placeholder="请输入"
size="large"
onChange={this.getInputValue}
value={this.state.searchData.data}
/>
<Input placeholder='请输入' size='large' onChange={this.getInputValue} value={this.state.searchData.data} />
</Form.Item>
<Checkbox.Group
style={{ width: '100%' }}
onChange={this.onChange}
value={this.state.checkedList}>
<Checkbox.Group style={{ width: '100%' }} onChange={this.onChange} value={this.state.checkedList}>
<Row>
{allClassList.map((item, index) => {
return (
<Col span={16} key={index}>
<Checkbox value={item.name}>{item.name}</Checkbox>
<Button
shape="circle"
shape='circle'
style={{
height: '20px',
width: '20px',
......@@ -456,32 +388,24 @@ export default class KnowledgeMap extends Component {
}}
/>
</Col>
)
);
})}
</Row>
</Checkbox.Group>
<Form.Item>
<Button
onClick={this.getMapButton}
type="primary"
htmlType="submit"
className="login-form-button">
<Button onClick={this.getMapButton} type='primary' htmlType='submit' className='login-form-button'>
搜索
</Button>
</Form.Item>
</Form>
) : null}
</Animate>
<Button
type="primary"
htmlType="submit"
className="login-form-button"
onClick={this.onClick}>
<Button type='primary' htmlType='submit' className='login-form-button' onClick={this.onClick}>
{this.state.show ? '收起' : '展开'}
</Button>
</Card>
</div>
<div className="KnowledgeMap-right-div">
<div className='KnowledgeMap-right-div'>
<Graphin
data={nodeData}
layout={{
......@@ -496,7 +420,8 @@ export default class KnowledgeMap extends Component {
nodeClusterBy: 'label', // 节点聚类的映射字段
clusterNodeStrength: 20, // 节点聚类作用力
// defSpringLen: defSpreingLen,
}}>
}}
>
{/* <Tooltip bindType="node" style={{ width: '200px', "background": "#fff", }} >
{(value) => {
if (value.model) {
......@@ -534,24 +459,18 @@ export default class KnowledgeMap extends Component {
</Tooltip> */}
<ContextMenu style={{ width: '80px' }}>
<Menu
options={options}
onChange={this.handleChange}
bindType="node"
/>
<Menu options={options} onChange={this.handleChange} bindType='node' />
</ContextMenu>
<ContextMenu style={{ width: '80px' }} bindType="canvas">
<ContextMenu style={{ width: '80px' }} bindType='canvas'>
{/* <CanvasMenu /> */}
</ContextMenu>
<ContextMenu
style={{ width: '120px', background: '#fff' }}
bindType="edge">
<ContextMenu style={{ width: '120px', background: '#fff' }} bindType='edge'>
<Menu
options={optionsEdge.map((item) => {
return { ...item, name: `${item.name}` }
return { ...item, name: `${item.name}` };
})}
onChange={this.handleChange}
bindType="edge"
bindType='edge'
/>
</ContextMenu>
{/* <Tooltip bindType="edge" style={{ "background": "#fff", }} >
......@@ -579,89 +498,65 @@ export default class KnowledgeMap extends Component {
</Tooltip> */}
</Graphin>
</div>
<div className="KnowledgeMap-details-div">
<div className='KnowledgeMap-details-div'>
<Card hoverable style={{ width: '100%' }}>
<Animate transitionName="fade" transitionAppear>
<Animate transitionName='fade' transitionAppear>
{this.state.show2
? Object.keys(modelData).map((item, index) => {
if (item != 'smiles') {
return (
<div key={index}>
<span className="left-title">{item}: </span>
{
typeof modelData[item] === 'object' &&
modelData[item] != null && modelData[item].map((item2, index) => {
if (item == 'reference') {
return (
<Tag
color="blue"
style={
{
if (item != 'smiles') {
return (
<div key={index}>
<span className='left-title'>{item}: </span>
{typeof modelData[item] === 'object' &&
modelData[item] != null &&
modelData[item].map((item2, index) => {
if (item == 'reference') {
return (
<Tag
color='blue'
style={{
wordWrap: 'break-word',
wordBreak: 'normal'
}
}
onClick={() => {
this.getReferences2(item2)
}}>
{item2}
</Tag>
)
}
else {
return (
<span
color="blue"
onClick={() => {
this.getReferences2(item2)
}}>
{item2}
</span>
)
}
})
}
{
typeof modelData[item] != 'object' &&
<span key={index}>
{/* <span className="left-title">{item}: </span> */}
{modelData[item]
}
</span>
}
</div>
)
} else {
return (
modelData[item] && (
<Jsme
key={index}
height="150px"
width=""
options="depict,useopenchemlib"
smiles={modelData[item]}
/>
)
)
}
})
wordBreak: 'normal',
}}
onClick={() => {
this.getReferences2(item2);
}}
>
{item2}
</Tag>
);
} else {
return (
<span
color='blue'
onClick={() => {
this.getReferences2(item2);
}}
>
{item2}
</span>
);
}
})}
{typeof modelData[item] != 'object' && (
<span key={index}>
{/* <span className="left-title">{item}: </span> */}
{modelData[item]}
</span>
)}
</div>
);
} else {
return modelData[item] && <Jsme key={index} height='150px' width='' options='depict,useopenchemlib' smiles={modelData[item]} />;
}
})
: null}
</Animate>
</Card>
</div>
</div>
)
);
}
}
src/routes/MolecularSearch/index.js
import React, { Component } from 'react'
import { Jsme } from 'jsme-react'
import qs from 'qs'
import { request } from '../../utils/request'
import request from '../../utils/request'
import { Input,Button,Modal,Table,message,Pagination } from 'antd';
import Molstar from "molstar-react";
import './index.css'
......
src/utils/request.js
import axios from 'axios'
axios.defaults.timeout = 15000
document.onkeydown = function () {
var e = window.event || arguments[0]
if (e.keyCode == 123) {
return false
} else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
return false
}
import axios from 'axios';
import { getQueryString } from './utils';
//禁用F12功能
function disableF12() {
document.onkeydown = function() {
var e = window.event || arguments[0];
if (e.keyCode == 123) {
return false;
} else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
return false;
}
};
//禁用鼠标右键
document.oncontextmenu = function() {
return false;
};
}
document.oncontextmenu = function () {
return false
// disableF12();
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({
baseURL: 'http://52.83.169.190:8003/',
})
checkToken();
//拦截器
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
......@@ -2,9 +2,9 @@ function accMul(arg1, arg2) {
let m = 0;
const s1 = arg1.toString();
const s2 = arg2.toString();
m += s1.split(".").length > 1 ? s1.split(".")[1].length : 0;
m += s2.split(".").length > 1 ? s2.split(".")[1].length : 0;
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / 10 ** m;
m += s1.split('.').length > 1 ? s1.split('.')[1].length : 0;
m += s2.split('.').length > 1 ? s2.split('.')[1].length : 0;
return (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / 10 ** m;
}
export function digitUppercase(n) {
......@@ -33,7 +33,6 @@ export function digitUppercase(n) {
.replace(/^整$/, '零元整');
}
/**
* 生成指定区间的随机整数
* @param min
......@@ -49,8 +48,8 @@ export function randomNum(min, max) {
* @param str
* @returns {number}
*/
export function calculateWidth(arr){
return 30 + arr[0].length*15
export function calculateWidth(arr) {
return 30 + arr[0].length * 15;
}
/**
......@@ -59,8 +58,21 @@ export function calculateWidth(arr){
* @constructor
*/
export function preloadingImages(arr) {
arr.forEach(item=>{
const img = new Image()
img.src = item
})
}
\ No newline at end of file
arr.forEach((item) => {
const img = new Image();
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;
}
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