Commit b890a542 by wangshufen

feature:登录功能添加token校验

parent c734ee43
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',
},
};
{
"compilerOptions": {
"baseUrl": "./",
"experimentalDecorators": true,
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", ".vscode", "library", "local", "settings", "temp", "build"]
}
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
......
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'
......
...@@ -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'
......
...@@ -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'
......
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
......
...@@ -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'
......
...@@ -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
......
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>
) );
} }
} }
...@@ -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'
......
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>
) );
} }
} }
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'
......
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;
...@@ -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;
} }
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