Skip to content

E
elegantDeepKinase
Commit febb13ed by wangshufen
Options

fixed:kinase bug修复

parent 36c9821b
Showing with 1330 additions and 1414 deletions
.babelrc
{
"presets":["react-app"],
"plugins": [
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
["transform-decorators-legacy"]
]
}
\ No newline at end of file
"presets": ["react-app"],
"plugins": [["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }], ["transform-decorators-legacy"]]
}
.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/*"]
}
}
}
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,Popover,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
import React, { Component } from 'react'
import { Card,Tooltip,Popover,message,Radio,Button,Icon,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography, Dropdown} 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
import React, { Component } from 'react'
import { Card,Tooltip,message,Button,Tabs,Spin,Table,Tag, Collapse,Divider,Modal,Form,Select,InputNumber,Popover} 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
import React, { Component } from 'react'
import { Card,Tooltip,Popover,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/index.js
......@@ -3,7 +3,7 @@ import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from
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/Kinase/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
......@@ -15,7 +15,7 @@ export default class IndicationDetails extends Component {
}
getDetails () {
this.setState({ loading: true })
request.post('/gpcr/indication_search', this.state.smilesData)
request.post('/kinase/indication_search', this.state.smilesData)
.then(res => {
this.setState({ loading: false })
if (res.data.code === 200) {
......
src/routes/Kinase/LigandDetails/index.js
......@@ -18,7 +18,7 @@ import {
Menu,
Dropdown,
} 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/Kinase/SearchDetails/index.js
import React, { Component } from 'react'
import {
Card,
Tooltip,
message,
Button,
Tabs,
Spin,
Table,
Tag,
Collapse,
Input,
Modal,
Form,
Select,
InputNumber,
Popover,
Pagination,
Anchor,
Icon,
Badge,
Menu,
Dropdown,
} from 'antd'
import WrappedIframe from '../../../components/iframePdb'
import { request } from '../../../utils/request'
import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react'
import qs from 'qs'
import './index.css'
const { Panel } = Collapse
const { TabPane } = Tabs
const { Option } = Select
const { Link } = Anchor
let id = 0
import React, { Component } from 'react';
import { Card, Tooltip, message, Button, Tabs, Spin, Table, Tag, Collapse, Input, Modal, Form, Select, InputNumber, Popover, Pagination, Anchor, Icon, Badge, Menu, Dropdown } from 'antd';
import WrappedIframe from '../../../components/iframePdb';
import request from '../../../utils/request';
import Molstar from 'molstar-react';
import { Jsme } from 'jsme-react';
import qs from 'qs';
import './index.css';
const { Panel } = Collapse;
const { TabPane } = Tabs;
const { Option } = Select;
const { Link } = Anchor;
let id = 0;
@Form.create()
export default class SearchDetails extends Component {
......@@ -140,48 +118,48 @@ export default class SearchDetails extends Component {
total_num3: 0,
aciveKey: '',
directoryState: false,
};
componentDidMount() {
this.getDetails();
}
componentDidMount () {
this.getDetails()
}
getDetails () {
getDetails() {
// this.setState({loading:true})
this.setState({ loading: true })
this.setState({ loading: true });
request
.post('kinase/drug_detail', qs.parse(this.props.location.search.slice(1)))
.then((res) => {
this.setState({ loading: false })
this.setState({ loading: false });
if (res.data.code === 200) {
let data = res.data.data
console.log(data)
let data = res.data.data;
console.log(data);
this.setState({
DetailsData: data,
})
this.setState({ Calculated_propeties: data.Calculated_propeties })
this.setState({ Biological_propeties: data.biological_propeties })
});
this.setState({ Calculated_propeties: data.Calculated_propeties });
this.setState({ Biological_propeties: data.biological_propeties });
this.setState({ loading: false })
this.setState({ loading: false });
let StructureList = data.Structure
let StructureList = data.Structure;
if (StructureList.length > 0) {
this.getStructure(StructureList[0].pdb)
this.getStructure(StructureList[0].pdb);
this.setState({
aciveKey: StructureList[0].pdb,
})
});
}
this.getBioassayList()
this.getTargetList()
this.getIndicationList()
this.getBioassayList();
this.getTargetList();
this.getIndicationList();
} else {
message.error(res.data.msg)
message.error(res.data.msg);
}
})
.catch((err) => {
console.error(err)
})
console.error(err);
});
}
getStructure = (e) => {
console.log(e)
console.log(e);
request
.post(
'/search_pdb_data',
......@@ -190,373 +168,360 @@ export default class SearchDetails extends Component {
})
)
.then((res) => {
this.setState({ loading: false })
this.setState({ loading: false });
if (res.data.code === 200) {
this.setState({ getStructureList: res.data.data })
let listData = this.state.listData
listData.pdb_code = res.data.data.name
listData.ligand = ''
listData.resolution = 0
this.setState({ listData })
let pdbLink =
'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
this.setState({ getStructureList: res.data.data });
let listData = this.state.listData;
listData.pdb_code = res.data.data.name;
listData.ligand = '';
listData.resolution = 0;
this.setState({ listData });
// debugger;
let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
this.setState({
pdbLink,
})
});
} else {
message.error(res.data.msg)
message.error(res.data.msg);
}
})
.catch((err) => {
console.error(err)
})
}
console.error(err);
});
};
ChangeTabs = (e) => {
this.setState({
aciveKey: e,
})
});
this.setState({
pdbLink: '',
})
let listData = this.state.listData
listData.ligand = ''
listData.resolution = 0
});
let listData = this.state.listData;
listData.ligand = '';
listData.resolution = 0;
if (listData.pdbList) {
delete listData.pdbList
delete listData.pdbList;
}
this.setState({
listData: listData,
pdbLink: '',
})
this.getStructure(e)
}
getPdid (e) {
console.log(e)
this.setState({ visible: true })
this.setState({ pdbId: e })
});
this.getStructure(e);
};
getPdid(e) {
console.log(e);
this.setState({ visible: true });
this.setState({ pdbId: e });
}
getTag = (e) => {
let listData = this.state.listData
listData.pdb_code = e
listData.ligand = ''
listData.resolution = 0
this.setState({ listData })
let pdbLink2 = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
let listData = this.state.listData;
listData.pdb_code = e;
listData.ligand = '';
listData.resolution = 0;
this.setState({ listData });
let pdbLink2 = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
this.setState({
pdbLink2,
})
this.setState({ visible: true })
this.setState({ pdbId: e })
}
});
this.setState({ visible: true });
this.setState({ pdbId: e });
};
getReferences = (e) => {
window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`)
}
window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`);
};
getReferences2 = (e) => {
window.open(e)
}
window.open(e);
};
getList = () => {
console.log('getList')
console.log('getList');
if (this.state.listData.ligand === '') {
message.warning('输入查询条件')
return
message.warning('输入查询条件');
return;
}
JSON.stringify(this.state.listData)
let listData = this.state.listData
listData.pdbList = this.state.pdbList
let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
JSON.stringify(this.state.listData);
let listData = this.state.listData;
listData.pdbList = this.state.pdbList;
let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
this.setState({
pdbLink,
})
}
});
};
getResolutionData = (e) => {
let listData = this.state.listData
listData.resolution = e
let listData = this.state.listData;
listData.resolution = e;
this.setState({
listData,
})
}
});
};
LigandChange = (e) => {
let listData = this.state.listData
listData.ligand = e
let listData = this.state.listData;
listData.ligand = e;
this.setState({
listData,
})
}
});
};
callback () { }
getOne (e) {
console.log(e)
const { dataid } = e
callback() {}
getOne(e) {
console.log(e);
const { dataid } = e;
let data = {
dataid,
}
};
this.props.history.push({
pathname: '/kinase/TargetDetails',
search: qs.stringify(data),
})
});
}
getBioassayList = () => {
console.log(this.state.dataOne)
const { dataid } = this.state.dataOne
this.setState({ loading: true })
console.log(this.state.dataOne);
const { dataid } = this.state.dataOne;
this.setState({ loading: true });
request
.post('kinase/drug_detail/bioassay', this.state.BioassaySearch)
.then((res) => {
this.setState({ loading: false })
this.setState({ loading: false });
if (res) {
console.log(res)
let DetailsData = this.state.DetailsData
DetailsData.Bioassay = res.data.data
this.setState({ total_num2: res.data.total_num })
console.log(res);
let DetailsData = this.state.DetailsData;
DetailsData.Bioassay = res.data.data;
this.setState({ total_num2: res.data.total_num });
this.setState({
DetailsData: DetailsData,
})
});
}
})
.catch((err) => {
console.error(err)
})
}
console.error(err);
});
};
getTargetList = () => {
console.log(this.state.dataOne)
const { dataid } = this.state.dataOne
this.setState({ loading: true })
console.log(this.state.dataOne);
const { dataid } = this.state.dataOne;
this.setState({ loading: true });
request
.post('kinase/drug_detail/target', this.state.TargetSearch)
.then((res) => {
this.setState({ loading: false })
this.setState({ loading: false });
if (res) {
console.log(res)
let DetailsData = this.state.DetailsData
DetailsData.Target = res.data.data
this.setState({ total_num: res.data.total_num })
console.log(res);
let DetailsData = this.state.DetailsData;
DetailsData.Target = res.data.data;
this.setState({ total_num: res.data.total_num });
this.setState({
DetailsData: DetailsData,
})
});
}
})
.catch((err) => {
console.error(err)
})
}
console.error(err);
});
};
getIndicationList = () => {
console.log(this.state.dataOne)
const { dataid } = this.state.dataOne
this.setState({ loading: true })
console.log(this.state.dataOne);
const { dataid } = this.state.dataOne;
this.setState({ loading: true });
request
.post('kinase/drug_detail/indication', this.state.IndicationSearch)
.then((res) => {
this.setState({ loading: false })
this.setState({ loading: false });
if (res) {
console.log(res)
let DetailsData = this.state.DetailsData
DetailsData.Indication = res.data.data
this.setState({ total_num3: res.data.total_num })
console.log(res);
let DetailsData = this.state.DetailsData;
DetailsData.Indication = res.data.data;
this.setState({ total_num3: res.data.total_num });
this.setState({
DetailsData: DetailsData,
})
});
}
})
.catch((err) => {
console.error(err)
})
}
console.error(err);
});
};
onShowSizeChange = (current, pageSize) => {
let BioassaySearch = this.state.BioassaySearch
BioassaySearch.page = current
BioassaySearch.page_size = pageSize
let BioassaySearch = this.state.BioassaySearch;
BioassaySearch.page = current;
BioassaySearch.page_size = pageSize;
this.setState({
BioassaySearch,
})
this.getBioassayList()
}
});
this.getBioassayList();
};
onChange = (current, pageSize) => {
let BioassaySearch = this.state.BioassaySearch
BioassaySearch.page = current
BioassaySearch.page_size = pageSize
let BioassaySearch = this.state.BioassaySearch;
BioassaySearch.page = current;
BioassaySearch.page_size = pageSize;
this.setState({
BioassaySearch,
})
});
this.getBioassayList()
}
this.getBioassayList();
};
onShowSizeChange2 = (current, pageSize) => {
console.log(current, pageSize)
let TargetSearch = this.state.TargetSearch
TargetSearch.page = current
TargetSearch.page_size = pageSize
console.log(current, pageSize);
let TargetSearch = this.state.TargetSearch;
TargetSearch.page = current;
TargetSearch.page_size = pageSize;
this.setState({
TargetSearch,
})
this.getTargetList()
}
});
this.getTargetList();
};
onChange2 = (current, pageSize) => {
console.log(current, pageSize)
let TargetSearch = this.state.TargetSearch
TargetSearch.page = current
TargetSearch.page_size = pageSize
console.log(current, pageSize);
let TargetSearch = this.state.TargetSearch;
TargetSearch.page = current;
TargetSearch.page_size = pageSize;
this.setState({
TargetSearch,
})
this.getTargetList()
}
});
this.getTargetList();
};
onShowSizeChange3 = (current, pageSize) => {
console.log(current, pageSize)
let IndicationSearch = this.state.IndicationSearch
IndicationSearch.page = current
IndicationSearch.page_size = pageSize
console.log(current, pageSize);
let IndicationSearch = this.state.IndicationSearch;
IndicationSearch.page = current;
IndicationSearch.page_size = pageSize;
this.setState({
IndicationSearch,
})
this.getIndicationList()
}
});
this.getIndicationList();
};
onChange3 = (current, pageSize) => {
console.log(current, pageSize)
let IndicationSearch = this.state.IndicationSearch
IndicationSearch.page = current
IndicationSearch.page_size = pageSize
console.log(current, pageSize);
let IndicationSearch = this.state.IndicationSearch;
IndicationSearch.page = current;
IndicationSearch.page_size = pageSize;
this.setState({
IndicationSearch,
})
this.getIndicationList()
}
});
this.getIndicationList();
};
handleAnchorClick = (e) => {
e.preventDefault()
}
e.preventDefault();
};
getValue = (e) => {
const { value } = e.target
let superpositionData = this.state.superpositionData
superpositionData[0].chainID = value
this.setState(() => ({ superpositionData: superpositionData }))
}
const { value } = e.target;
let superpositionData = this.state.superpositionData;
superpositionData[0].chainID = value;
this.setState(() => ({ superpositionData: superpositionData }));
};
SelectValue = (e) => {
console.log(e)
let superpositionData = this.state.superpositionData
superpositionData[0].pdbID = e
this.setState(() => ({ superpositionData: superpositionData }))
}
console.log(e);
let superpositionData = this.state.superpositionData;
superpositionData[0].pdbID = e;
this.setState(() => ({ superpositionData: superpositionData }));
};
onChangeGroup = (e) => {
console.log(e)
console.log(e);
this.setState({
pdbList: e,
})
}
});
};
remove = (k) => {
const { form } = this.props
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue('keys')
const keys = form.getFieldValue('keys');
// We need at least one passenger
if (keys.length === 1) {
return
return;
}
this.setState({
sum: keys.length - 1,
})
});
// can use data-binding to set
form.setFieldsValue({
keys: keys.filter((key) => key !== k),
})
}
});
};
add = () => {
const { form } = this.props
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue('keys')
console.log(keys)
const nextKeys = keys.concat(id++)
const keys = form.getFieldValue('keys');
console.log(keys);
const nextKeys = keys.concat(id++);
// can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue({
keys: nextKeys,
})
});
this.setState({
sum: keys.length + 1,
})
}
});
};
handleSubmit = (e) => {
// console.log(e);
// e.preventDefault();
this.props.form.validateFields((err, values) => {
console.log(values)
const {
keys,
pdbList,
chainList,
methodList,
cutoffList,
cyclesList,
} = values
console.log('Received values of form: ', values)
console.log(values);
const { keys, pdbList, chainList, methodList, cutoffList, cyclesList } = values;
console.log('Received values of form: ', values);
// console.log('Merged values:', keys.map(key => names[key]))
// let names = keys.map(key => names[key])
for (let index = 0; index < pdbList.length; index++) {
var element = pdbList[index]
var element = pdbList[index];
if (element == undefined) {
pdbList[index] = ''
pdbList[index] = '';
}
}
let newArr = pdbList.filter((i) => i && i.trim())
let newArr = pdbList.filter((i) => i && i.trim());
for (let index = 0; index < chainList.length; index++) {
var element = chainList[index]
var element = chainList[index];
if (element == undefined) {
chainList[index] = ''
chainList[index] = '';
}
}
let newArr2 = chainList.filter((i) => i && i.trim())
let newArr2 = chainList.filter((i) => i && i.trim());
for (let index = 0; index < methodList.length; index++) {
var element = methodList[index]
var element = methodList[index];
if (element == undefined) {
methodList[index] = ''
methodList[index] = '';
}
}
let newArr3 = methodList.filter((i) => i && i.trim())
let newArr3 = methodList.filter((i) => i && i.trim());
for (let index = 0; index < cutoffList.length; index++) {
var element = cutoffList[index]
var element = cutoffList[index];
if (element == undefined) {
cutoffList[index] = ''
cutoffList[index] = '';
}
}
let newArr4 = cutoffList.filter((i) => i && i.trim())
let newArr4 = cutoffList.filter((i) => i && i.trim());
for (let index = 0; index < cyclesList.length; index++) {
var element = cyclesList[index]
var element = cyclesList[index];
if (element == undefined) {
cyclesList[index] = ''
cyclesList[index] = '';
}
}
let newArr5 = cyclesList.filter((i) => i && i.trim())
console.log(newArr2)
let superpositionData = this.state.superpositionData
superpositionData[1].pdbID = newArr[0] === undefined ? '' : newArr[0]
superpositionData[1].chainID = newArr2[0] === undefined ? '' : newArr2[0]
superpositionData[1].method = newArr3[0] === undefined ? '' : newArr3[0]
superpositionData[1].cutoff =
newArr4[0] === undefined ? '' : parseInt(newArr4[0])
superpositionData[1].cycles =
newArr5[0] === undefined ? '' : parseInt(newArr5[0])
superpositionData[2].pdbID = newArr[1] === undefined ? '' : newArr[1]
superpositionData[2].chainID = newArr2[1] === undefined ? '' : newArr2[1]
superpositionData[2].method = newArr3[1] === undefined ? '' : newArr3[1]
; (superpositionData[2].cutoff =
newArr4[1] === undefined ? '' : parseInt(newArr4[1])),
(superpositionData[2].cycles =
newArr5[1] === undefined ? '' : parseInt(newArr5[1]))
this.setState(() => ({ superpositionData: superpositionData }))
console.log(this.state.superpositionData)
let listData = this.state.listData
listData.pdbList = this.state.superpositionData
let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
this.setState({ listData })
this.setState({ pdbLink })
console.log(this.state.pdbLink)
})
}
render () {
let newArr5 = cyclesList.filter((i) => i && i.trim());
console.log(newArr2);
let superpositionData = this.state.superpositionData;
superpositionData[1].pdbID = newArr[0] === undefined ? '' : newArr[0];
superpositionData[1].chainID = newArr2[0] === undefined ? '' : newArr2[0];
superpositionData[1].method = newArr3[0] === undefined ? '' : newArr3[0];
superpositionData[1].cutoff = newArr4[0] === undefined ? '' : parseInt(newArr4[0]);
superpositionData[1].cycles = newArr5[0] === undefined ? '' : parseInt(newArr5[0]);
superpositionData[2].pdbID = newArr[1] === undefined ? '' : newArr[1];
superpositionData[2].chainID = newArr2[1] === undefined ? '' : newArr2[1];
superpositionData[2].method = newArr3[1] === undefined ? '' : newArr3[1];
(superpositionData[2].cutoff = newArr4[1] === undefined ? '' : parseInt(newArr4[1])), (superpositionData[2].cycles = newArr5[1] === undefined ? '' : parseInt(newArr5[1]));
this.setState(() => ({ superpositionData: superpositionData }));
console.log(this.state.superpositionData);
let listData = this.state.listData;
listData.pdbList = this.state.superpositionData;
let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
this.setState({ listData });
this.setState({ pdbLink });
console.log(this.state.pdbLink);
});
};
render() {
const {
visible,
panelList,
......@@ -575,11 +540,11 @@ export default class SearchDetails extends Component {
addList,
sum,
directoryState,
} = this.state
} = this.state;
const formItemLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 12 },
}
};
const columns = [
{
title: 'Target name',
......@@ -587,29 +552,30 @@ export default class SearchDetails extends Component {
key: 'Target name',
render: (item, record) => (
<Tag
color="blue"
color='blue'
onClick={() => {
this.getOne(record)
}}>
this.getOne(record);
}}
>
{record.Target_name}
</Tag>
),
},
{
title: "Uniport id",
dataIndex: "Uniport_id",
key: "Uniport_id",
title: 'Uniport id',
dataIndex: 'Uniport_id',
key: 'Uniport_id',
},
{
title: "Group",
dataIndex: "Group",
key: "Group",
title: 'Group',
dataIndex: 'Group',
key: 'Group',
},
{
title: "Family",
dataIndex: "Family",
key: "Family",
title: 'Family',
dataIndex: 'Family',
key: 'Family',
},
{
title: 'PDB',
......@@ -619,14 +585,15 @@ export default class SearchDetails extends Component {
{PDB.map((item, index) => {
return (
<Tag
color="blue"
color='blue'
key={index}
onClick={() => {
this.getTag(item)
}}>
this.getTag(item);
}}
>
{item.toUpperCase()}
</Tag>
)
);
})}
</span>
),
......@@ -638,14 +605,14 @@ export default class SearchDetails extends Component {
render: (sequence) => (
<span>
{
<Tooltip placement="topLeft" title={sequence}>
<Tooltip placement='topLeft' title={sequence}>
<Button>Sequence</Button>
</Tooltip>
}
</span>
),
},
]
];
const columns2 = [
{
title: 'Indication',
......@@ -660,7 +627,7 @@ export default class SearchDetails extends Component {
<span>
{Synonyms != null &&
Synonyms.map((item, index) => {
return <span key={index}>{item.toUpperCase()},</span>
return <span key={index}>{item.toUpperCase()},</span>;
})}
</span>
),
......@@ -672,7 +639,7 @@ export default class SearchDetails extends Component {
render: (Status) => (
<span>
{Status.map((item, index) => {
return <Tag key={index}>{item.toUpperCase()}</Tag>
return <Tag key={index}>{item.toUpperCase()}</Tag>;
})}
</span>
),
......@@ -701,28 +668,29 @@ export default class SearchDetails extends Component {
reference.map((item, index) => {
return (
<Tag
color="blue"
color='blue'
key={index}
onClick={() => {
this.getReferences2(item)
}}>
this.getReferences2(item);
}}
>
{item.toUpperCase()}
</Tag>
)
);
})}
</span>
),
},
]
];
const menu = (
<Menu>
<Menu.Item>Action 1</Menu.Item>
<Menu.Item>Action 2</Menu.Item>
</Menu>
)
);
const expandedRowRender = (e) => {
console.log(e)
const { standards } = e
console.log(e);
const { standards } = e;
const columns = [
{
title: 'Standard Type',
......@@ -752,21 +720,20 @@ export default class SearchDetails extends Component {
<span>
{
<Tag
color="blue"
color='blue'
onClick={() => {
this.getReferences2(reference)
}}>
this.getReferences2(reference);
}}
>
{reference}
</Tag>
}
</span>
),
},
]
return (
<Table columns={columns} dataSource={standards} pagination={false} />
)
}
];
return <Table columns={columns} dataSource={standards} pagination={false} />;
};
const columns3 = [
{
......@@ -774,10 +741,11 @@ export default class SearchDetails extends Component {
dataIndex: 'Target',
render: (item, record) => (
<Tag
color="blue"
color='blue'
onClick={() => {
this.getOne(record)
}}>
this.getOne(record);
}}
>
{record.Target_name}
</Tag>
),
......@@ -805,7 +773,7 @@ export default class SearchDetails extends Component {
// </span>
// ),
// },
]
];
const columnsChain = [
{
title: 'Chain_name',
......@@ -838,14 +806,14 @@ export default class SearchDetails extends Component {
dataIndex: 'res_end',
key: 'res_end',
},
]
const { getFieldDecorator, getFieldValue } = this.props.form
];
const { getFieldDecorator, getFieldValue } = this.props.form;
const formItemLayoutWithOutLabel = {
wrapperCol: {
xs: { span: 24, offset: 0 },
sm: { span: 20, offset: 4 },
},
}
};
const formItemLayout2 = {
labelCol: {
xs: { span: 24 },
......@@ -855,15 +823,11 @@ export default class SearchDetails extends Component {
xs: { span: 24 },
sm: { span: 20 },
},
}
getFieldDecorator('keys', { initialValue: [] })
const keys = getFieldValue('keys')
};
getFieldDecorator('keys', { initialValue: [] });
const keys = getFieldValue('keys');
const formItems = keys.map((k, index) => (
<Form.Item
{...(index === 0 ? formItemLayout2 : formItemLayoutWithOutLabel)}
label={index === 0 ? 'SelectPDB: ' : ''}
required={false}
key={k}>
<Form.Item {...(index === 0 ? formItemLayout2 : formItemLayoutWithOutLabel)} label={index === 0 ? 'SelectPDB: ' : ''} required={false} key={k}>
<div style={{ display: 'flex ', alignItems: 'center ' }}>
{getFieldDecorator(`pdbList[${k}]`)(
<Select style={{ width: '100px' }}>
......@@ -872,22 +836,15 @@ export default class SearchDetails extends Component {
<Option key={index.pdb} value={item.pdb.toLowerCase()}>
{item.pdb.toLowerCase()}
</Option>
)
);
})}
</Select>
)}
<div>
<Form.Item style={{ margin: '0px' }}>
{getFieldDecorator(`chainList[${k}]`)(
<Input
placeholder="请输入Chain"
style={{ width: '100px', marginRight: 8 }}
/>
)}
</Form.Item>
<Form.Item style={{ margin: '0px' }}>{getFieldDecorator(`chainList[${k}]`)(<Input placeholder='请输入Chain' style={{ width: '100px', marginRight: 8 }} />)}</Form.Item>
</div>
<div>
<Form.Item style={{ margin: '0px' }} help="The information is being validated...">
<Form.Item style={{ margin: '0px' }} help='The information is being validated...'>
{getFieldDecorator(`methodList[${k}]`)(
<Select style={{ width: '100px' }}>
{addList.map((item, index) => {
......@@ -895,72 +852,41 @@ export default class SearchDetails extends Component {
<Option key={index} value={item}>
{item}
</Option>
)
);
})}
</Select>
)}
</Form.Item>
</div>
<div>
<Form.Item style={{ margin: '0px' }}>
{getFieldDecorator(`cutoffList[${k}]`)(
<Input
placeholder="Cutoff"
style={{ width: '100px', marginRight: 8 }}
/>
)}
</Form.Item>
<Form.Item style={{ margin: '0px' }}>{getFieldDecorator(`cutoffList[${k}]`)(<Input placeholder='Cutoff' style={{ width: '100px', marginRight: 8 }} />)}</Form.Item>
</div>
<div>
<Form.Item style={{ margin: '0px' }}>
{getFieldDecorator(`cyclesList[${k}]`)(
<Input
placeholder="Cycles"
style={{ width: '100px', marginRight: 8 }}
/>
)}
{keys.length > 1 ? (
<Icon
className="dynamic-delete-button"
type="minus-circle-o"
onClick={() => this.remove(k)}
style={{ marginLeft: '10px' }}
/>
) : null}
{getFieldDecorator(`cyclesList[${k}]`)(<Input placeholder='Cycles' style={{ width: '100px', marginRight: 8 }} />)}
{keys.length > 1 ? <Icon className='dynamic-delete-button' type='minus-circle-o' onClick={() => this.remove(k)} style={{ marginLeft: '10px' }} /> : null}
</Form.Item>
</div>
</div>
</Form.Item>
))
));
return (
<div className="search-details-div">
<Modal
footer={null}
closable={false}
width={850}
visible={visible}
wrapClassName="vertical-center-modal"
onCancel={() => this.setState({ visible: false })}>
<div className="Molstar-div">
<div className='search-details-div'>
<Modal footer={null} closable={false} width={850} visible={visible} wrapClassName='vertical-center-modal' onCancel={() => this.setState({ visible: false })}>
<div className='Molstar-div'>
{/* <Molstar file={this.state.fileData} /> */}
<iframe
src={pdbLink2}
height={'500px'}
width={'100%'}
name="iframe-video"
/>
<iframe src={pdbLink2} height={'500px'} width={'100%'} name='iframe-video' />
</div>
</Modal>
<Spin tip="Loading..." size="large" spinning={this.state.loading}>
<div className="Anchor-div">
<Spin tip='Loading...' size='large' spinning={this.state.loading}>
<div className='Anchor-div'>
{directoryState && (
<Button type="primary" style={{ width: '100%' }} onClick={() => this.setState({ directoryState: false })}>
<Button type='primary' style={{ width: '100%' }} onClick={() => this.setState({ directoryState: false })}>
收起目录
</Button>
)}
{!directoryState && (
<Button type="primary" style={{ width: '100%' }} onClick={() => this.setState({ directoryState: true })}>
<Button type='primary' style={{ width: '100%' }} onClick={() => this.setState({ directoryState: true })}>
展开目录
</Button>
)}
......@@ -968,143 +894,101 @@ export default class SearchDetails extends Component {
{directoryState && (
<div>
<Anchor onClick={this.handleAnchorClick}>
<Link href="#card" title="Title" />
<Link href="#Indication" title="Indication" />
<Link href="#Target" title="Target" />
<Link
href="#BiologicalPropeties"
title="Biological Propeties"
/>
<Link href="#Bioassay" title="Bioassay" />
<Link
href="#CalculatedPropeties"
title="Calculated Propeties"
/>
<Link href="#Structure" title="Structure" />
<Link href='#card' title='Title' />
<Link href='#Indication' title='Indication' />
<Link href='#Target' title='Target' />
<Link href='#BiologicalPropeties' title='Biological Propeties' />
<Link href='#Bioassay' title='Bioassay' />
<Link href='#CalculatedPropeties' title='Calculated Propeties' />
<Link href='#Structure' title='Structure' />
</Anchor>
</div>
)}
</div>
<Card hoverable id="card">
<Card hoverable id='card'>
<div>
<div className="title-div">{name}</div>
<div className="title-div-top">
<div className="DataList-left">
<div className='title-div'>{name}</div>
<div className='title-div-top'>
<div className='DataList-left'>
<div>
<div className="title-div">{DetailsData.name}</div>
<div className="title-div-top">
<div className="DataList-left">
<div className='title-div'>{DetailsData.name}</div>
<div className='title-div-top'>
<div className='DataList-left'>
<div>
<div className="div-list">
<div className="list-one">
<div className="left-title">Synonyms</div>
<div className='div-list'>
<div className='list-one'>
<div className='left-title'>Synonyms</div>
<div className="Synonyms-div">
<div className='Synonyms-div'>
<div> </div>
{DetailsData.synonyms.map((item, index) => {
return <Tag>{item}</Tag>
return <Tag key={index}>{item}</Tag>;
})}
</div>
</div>
<div className="list-one">
<div className="left-title">Drug Type</div>
<div className='list-one'>
<div className='left-title'>Drug Type</div>
<div />
{DetailsData.datatype}
</div>
<div className="list-one">
<div className="left-title">Smiles</div>
<div className='list-one'>
<div className='left-title'>Smiles</div>
<div />
{DetailsData.smiles}
</div>
</div>
</div>
</div>
<div className="Jsme-div">
{DetailsData.smiles && (
<Jsme
height="300px"
width="300px"
options="depict,useopenchemlib"
smiles={DetailsData.smiles}
/>
)}
</div>
<div className='Jsme-div'>{DetailsData.smiles && <Jsme height='300px' width='300px' options='depict,useopenchemlib' smiles={DetailsData.smiles} />}</div>
</div>
</div>
</div>
</div>
</div>
</Card>
<Collapse
defaultActiveKey={['1', '2', '3', '4', '5', '6']}
onChange={this.callback}>
<Panel header="Indication" id="Indication" key="6">
<Table
bordered
rowKey="dataid"
dataSource={DetailsData.Indication}
pagination={false}
columns={columns2}
/>
<Pagination
showSizeChanger
onShowSizeChange={this.onShowSizeChange3}
onChange={this.onChange3}
total={total_num3}
/>
<Collapse defaultActiveKey={['1', '2', '3', '4', '5', '6']} onChange={this.callback}>
<Panel header='Indication' id='Indication' key='6'>
<Table bordered rowKey='dataid' dataSource={DetailsData.Indication} pagination={false} columns={columns2} />
<Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange3} onChange={this.onChange3} total={total_num3} />
</Panel>
<Panel header="Target" key="1" id="Target">
<Table
bordered
rowKey="index"
dataSource={DetailsData.Target}
pagination={false}
columns={columns}
/>
<Pagination
showSizeChanger
onShowSizeChange={this.onShowSizeChange2}
onChange={this.onChange2}
total={total_num}
/>
<Panel header='Target' key='1' id='Target'>
<Table bordered rowKey='index' dataSource={DetailsData.Target} pagination={false} columns={columns} />
<Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange2} onChange={this.onChange2} total={total_num} />
</Panel>
<Panel
header="Biological Propeties"
id="BiologicalPropeties"
key="5">
<div className="Calcilated">
<div className="div-list">
<div className="list-one">
<Panel header='Biological Propeties' id='BiologicalPropeties' key='5'>
<div className='Calcilated'>
<div className='div-list'>
<div className='list-one'>
<div>Absorption:</div>
<div />
{Biological_propeties.absorption}
</div>
<div className="list-one">
<div className='list-one'>
<div>Clearance:</div>
<div />
{Biological_propeties.clearance}
</div>
<div className="list-one">
<div className='list-one'>
<div>Distribution: </div>
<div />
{Biological_propeties.distribution}
</div>
<div className="list-one">
<div className='list-one'>
<div>Elimination:</div>
<div />
{Biological_propeties.elimination}
</div>
<div className="list-one">
<div className='list-one'>
<div>Half Life: </div>
<div />
{Biological_propeties.half_life}
</div>
<div className="list-one">
<div className='list-one'>
<div>metabolism: </div>
<div />
{Biological_propeties.metabolism}
</div>
<div className="list-one">
<div className='list-one'>
<div>Toxicity: </div>
<div />
{Biological_propeties.toxicity}
......@@ -1113,59 +997,44 @@ export default class SearchDetails extends Component {
</div>
</Panel>
<Panel header="Bioassay" key="2" id="Bioassay">
<Table
bordered
rowKey="dataid"
dataSource={DetailsData.Bioassay}
pagination={false}
columns={columns3}
expandedRowRender={expandedRowRender}
/>
<Pagination
showSizeChanger
onShowSizeChange={this.onShowSizeChange}
onChange={this.onChange}
total={total_num2}
/>
<Panel header='Bioassay' key='2' id='Bioassay'>
<Table bordered rowKey='dataid' dataSource={DetailsData.Bioassay} pagination={false} columns={columns3} expandedRowRender={expandedRowRender} />
<Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange} total={total_num2} />
</Panel>
<Panel
header="Calculated Propeties"
key="3"
id="CalculatedPropeties">
<Panel header='Calculated Propeties' key='3' id='CalculatedPropeties'>
<div>
<div className="Calcilated">
<div className="list-one2">
<div className='Calcilated'>
<div className='list-one2'>
<div>Molecular weight:</div>
<div />
{Calculated_propeties.Molecular_weight}
</div>
<div className="list-one2">
<div className='list-one2'>
<div>LogP:</div>
<div />
{Calculated_propeties.logP}
</div>
<div className="list-one2">
<div className='list-one2'>
<div>Hydrogen bond donor: </div>
<div />
{Calculated_propeties.Hydrogen_bond_donor}
</div>
<div className="list-one2">
<div className='list-one2'>
<div>Hydrogen bond acceptor:</div>
<div />
{Calculated_propeties.Hydrogen_bond_acceptor}
</div>
<div className="list-one2">
<div className='list-one2'>
<div>Rotatable bond: </div>
<div />
{Calculated_propeties.Rotatable_bond}
</div>
<div className="list-one2">
<div className='list-one2'>
<div>sp3 Carbon: </div>
<div />
{Calculated_propeties.sp3_Carbon}
</div>
<div className="list-one2">
<div className='list-one2'>
<div>tPSA: </div>
<div />
{Calculated_propeties.tPSA}
......@@ -1173,88 +1042,64 @@ export default class SearchDetails extends Component {
</div>
</div>
</Panel>
<Panel header="Structure" key="4" id="Structure">
<Panel header='Structure' key='4' id='Structure'>
<Tabs
defaultActiveKey="0"
defaultActiveKey='0'
// type="card"
style={{ height: 1000 }}
tabPosition="left"
onChange={this.ChangeTabs}>
tabPosition='left'
onChange={this.ChangeTabs}
>
{DetailsData.Structure.map((item, index) => {
return (
<TabPane id={item.pdb} tab={item.pdb} key={item.pdb}>
<div className="TabPane-center">
<div className="Molstar-div2">
{this.state.aciveKey == item.pdb && (
<WrappedIframe pdbLink={this.state.pdbLink} />
)}
</div>
<div className="Structure-right">
<Form layout="horizontal">
<Form.Item label="详情" {...formItemLayout}>
<div className='TabPane-center'>
<div className='Molstar-div2'>{this.state.aciveKey == item.pdb && <WrappedIframe pdbLink={this.state.pdbLink} />}</div>
<div className='Structure-right'>
<Form layout='horizontal'>
<Form.Item label='详情' {...formItemLayout}>
<div>method: {getStructureList.method}</div>
<div>name: {getStructureList.name}</div>
<div>
pdb_datatime: {getStructureList.pdb_datatime}
</div>
<div>
resolution: {getStructureList.resolution}
</div>
<div>pdb_datatime: {getStructureList.pdb_datatime}</div>
<div>resolution: {getStructureList.resolution}</div>
</Form.Item>
<Form.Item label="References " {...formItemLayout}>
<Form.Item label='References ' {...formItemLayout}>
{getStructureList.References &&
getStructureList.References.map(
(item, index) => {
return (
<Button
type="primary"
onClick={() => {
this.getReferences(item)
}}
key={index}
style={{ marginRight: '5px' }}>
{item}
</Button>
)
}
)}
getStructureList.References.map((item, index) => {
return (
<Button
type='primary'
onClick={() => {
this.getReferences(item);
}}
key={index}
style={{ marginRight: '5px' }}
>
{item}
</Button>
);
})}
</Form.Item>
</Form>
<Collapse accordion>
<Panel header="对齐" key="1">
<div className="form-div">
<Form
onSubmit={this.handleSubmit}
className="login-form">
<Form.Item
label="Ref.PDB"
{...formItemLayout2}>
<Panel header='对齐' key='1'>
<div className='form-div'>
<Form onSubmit={this.handleSubmit} className='login-form'>
<Form.Item label='Ref.PDB' {...formItemLayout2}>
<div>
<Select
style={{ width: '100px' }}
value={
this.state.superpositionData[0].pdbID
}
onChange={this.SelectValue}>
{DetailsData.Structure.map(
(item, index) => {
return (
<Option
key={index.pdb}
value={item.pdb.toLowerCase()}>
{item.pdb.toLowerCase()}
</Option>
)
}
)}
<Select style={{ width: '100px' }} value={this.state.superpositionData[0].pdbID} onChange={this.SelectValue}>
{DetailsData.Structure.map((item, index) => {
return (
<Option key={index.pdb} value={item.pdb.toLowerCase()}>
{item.pdb.toLowerCase()}
</Option>
);
})}
</Select>
<Input
placeholder="请输入Chain"
placeholder='请输入Chain'
onChange={this.getValue}
value={
this.state.superpositionData[0]
.chainID
}
value={this.state.superpositionData[0].chainID}
style={{
width: '100px',
}}
......@@ -1264,101 +1109,84 @@ export default class SearchDetails extends Component {
{formItems}
<Form.Item {...formItemLayoutWithOutLabel}>
{sum < 2 && (
<Button
type="dashed"
onClick={this.add}
style={{ width: '60%' }}>
<Icon type="plus" /> Add field
<Button type='dashed' onClick={this.add} style={{ width: '60%' }}>
<Icon type='plus' /> Add field
</Button>
)}
</Form.Item>
<Form.Item {...formItemLayoutWithOutLabel}>
<Button type="primary" htmlType="submit">
<Button type='primary' htmlType='submit'>
对齐
</Button>
</Form.Item>
</Form>
</div>
</Panel>
<Panel header="抽取配体" key="2">
<Form layout="horizontal">
<Form.Item label="配体列表" {...formItemLayout}>
<Panel header='抽取配体' key='2'>
<Form layout='horizontal'>
<Form.Item label='配体列表' {...formItemLayout}>
{getStructureList.ligand_up_list &&
getStructureList.ligand_up_list.map(
(item, index) => {
return (
<Popover
content={
<div>
<div
key={index}
style={{
width: '100px',
wordWrap: 'break-word',
wordBreak: 'normal',
}}>
{item.comp_name}
</div>
<Jsme
height="100px"
width="100px"
options="depict,useopenchemlib"
smiles={item.smiles}
/>
getStructureList.ligand_up_list.map((item, index) => {
return (
<Popover
content={
<div>
<div
key={index}
style={{
width: '100px',
wordWrap: 'break-word',
wordBreak: 'normal',
}}
>
{item.comp_name}
</div>
}>
{
<Button
type="primary"
style={{ marginRight: '5px' }}>
{item.name}
</Button>
}
</Popover>
)
}
)}
<Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={item.smiles} />
</div>
}
>
{
<Button type='primary' style={{ marginRight: '5px' }}>
{item.name}
</Button>
}
</Popover>
);
})}
</Form.Item>
<Form.Item label="配体选择" {...formItemLayout}>
<Select
style={{ width: 250 }}
value={this.state.listData.ligand}
size="large"
onChange={this.LigandChange}>
<Form.Item label='配体选择' {...formItemLayout}>
<Select style={{ width: 250 }} value={this.state.listData.ligand} size='large' onChange={this.LigandChange}>
{getStructureList.ligand_list &&
getStructureList.ligand_list.map(
(item, index) => {
return (
<Option key={index} value={item}>
{item}
</Option>
)
}
)}
getStructureList.ligand_list.map((item, index) => {
return (
<Option key={index} value={item}>
{item}
</Option>
);
})}
</Select>
</Form.Item>
<Form.Item label="搜索半径" {...formItemLayout}>
<Form.Item label='搜索半径' {...formItemLayout}>
<InputNumber
style={{ width: 250 }}
min={getStructureList.resolution}
max={10}
placeholder={'请输入大于resolutiond数字'}
step={0.1}
size="large"
size='large'
onChange={this.getResolutionData}
/>
</Form.Item>
<Form.Item label="Search" {...formItemLayout}>
<Form.Item label='Search' {...formItemLayout}>
<Button
type="primary"
type='primary'
style={{ marginLeft: 50, width: 150 }}
size="large"
size='large'
loading={this.state.loading}
disabled={
getStructureList.ligand_list.length === 0
}
onClick={this.getList}>
disabled={getStructureList.ligand_list.length === 0}
onClick={this.getList}
>
Search
</Button>
</Form.Item>
......@@ -1367,21 +1195,15 @@ export default class SearchDetails extends Component {
</Collapse>
</div>
</div>
<Table
bordered
rowKey="item"
dataSource={getStructureList.chain}
pagination={false}
columns={columnsChain}
/>
<Table bordered rowKey='item' dataSource={getStructureList.chain} pagination={false} columns={columnsChain} />
</TabPane>
)
);
})}
</Tabs>
</Panel>
</Collapse>
</Spin>
</div>
)
);
}
}
src/routes/Kinase/SearchList/index.js
import React, { Component } from "react";
import { Jsme } from "jsme-react";
import { Card, Button, Pagination, Tabs, Spin, message, Collapse,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/Kinase/TargetDetails/index.js
......@@ -22,7 +22,7 @@ import {
Pagination,
} from 'antd'
import WrappedIframe from '../../../components/iframePdb'
import { request } from '../../../utils/request'
import request from '../../../utils/request'
import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react'
import qs from 'qs'
......@@ -1178,7 +1178,7 @@ export default class TargetDetails extends Component {
{targetsDetail.Structure.map((item, index) => {
return (
<Option key={index.pdb} value={item.pdb.toLowerCase()}>
{item.pdb.toLowerCase()}
{item.pdb&&item.pdb.toLowerCase()}
</Option>
)
})}
......@@ -1537,7 +1537,7 @@ export default class TargetDetails extends Component {
<Option
key={index}
value={item.pdb.toLowerCase()}>
{item.pdb.toLowerCase()}
{item.pdb&&item.pdb.toLowerCase()}
</Option>
)
}
......
src/routes/Kinase/index.js
import React from 'react'
import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from 'antd';
import LogoTitlte from '../../components/LogoTitlte/index'
import { Jsme } from 'jsme-react'
import qs from 'qs'
import { request } from '../../utils/request'
import './style.css'
import React from 'react';
import { Form, Input, Button, Select, Tabs, message, Radio, Checkbox, Row, Col } from 'antd';
import LogoTitlte from '../../components/LogoTitlte/index';
import { Jsme } from 'jsme-react';
import qs from 'qs';
import request from '../../utils/request';
import './style.css';
const { TabPane } = Tabs;
const { Option } = Select;
class Home extends React.Component {
state = {
select_db:'Ligands',
data:'',
select_db: 'Ligands',
data: '',
page: 1,
page_size: 10,
data_type:'smile',
target_class:'',
data_type: 'smile',
target_class: '',
// target_families:'',
searchData: {
name: 'Drug',
......@@ -22,14 +22,14 @@ class Home extends React.Component {
pdb_status: 0,
page: 1,
page_size: 10,
finger: 0
finger: 0,
},
TargetSearchData: {
name: 'Target',
target_class: '',
target_data: '',
target_family:'',
target_family: '',
pdb_status: 0,
page: 1,
page_size: 10,
......@@ -39,520 +39,479 @@ class Home extends React.Component {
name: 'Ligand',
page: 1,
page_size: 10,
finger: 0
finger: 0,
},
IndicationSearchData:{
name:'Indication',
indication:'',
page: 1,
page_size: 10
},
MutationSearchData:{
name:'Mutation',
chembl_id:'',
target_class :'All Class',
target_data:'',
target_families:'' ,
idselect_data:[],
page: 1,
page_size: 10
},
disabled:true,
loading:false,
SelectList:[],
draw:false,
classList:[],
classData:'All Class',
allClassList:{},
childClassList :[],
TargetClassList:[],
TargetAllClassList:[],
TargetChildClassList:[],
compoundList:[
'DrugName',
'Smiles'
],
targetList:[
'TargetName',
'UniprotId'
],
optionsList:[
{ label: '查询drug相关靶点', value: 1 },
{ label: '查询ligand相关靶点', value: 2,disabled: false, },
{ label: '是否有PDB结构', value: 3 },
]
}
// Mutation
CheckChange=(e)=>{
console.log(e);
let MutationSearchData = this.state.MutationSearchData;
MutationSearchData.idselect_data=e
this.setState(()=>({MutationSearchData:MutationSearchData}))
}
onAllChange=(e)=>{
if (e.target.checked) {
let MutationSearchData = this.state.MutationSearchData;
let all_idselect_data=["TM1", "TM4", "TM7", "ICL3", "ECL3", "N-Term", "ECL1", "ICL1", "TM5", "TM2","TM3", "TM6", "ICL2", "ECL2", "C-Term"]
MutationSearchData.idselect_data=all_idselect_data
this.setState(()=>({MutationSearchData:MutationSearchData }))
}else{
IndicationSearchData: {
name: 'Indication',
indication: '',
page: 1,
page_size: 10,
},
MutationSearchData: {
name: 'Mutation',
chembl_id: '',
target_class: 'All Class',
target_data: '',
target_families: '',
idselect_data: [],
page: 1,
page_size: 10,
},
disabled: true,
loading: false,
SelectList: [],
draw: false,
classList: [],
classData: 'All Class',
allClassList: {},
childClassList: [],
TargetClassList: [],
TargetAllClassList: [],
TargetChildClassList: [],
compoundList: ['DrugName', 'Smiles'],
targetList: ['TargetName', 'UniprotId'],
optionsList: [{ label: '查询drug相关靶点', value: 1 }, { label: '查询ligand相关靶点', value: 2, disabled: false }, { label: '是否有PDB结构', value: 3 }],
};
// Mutation
CheckChange = (e) => {
console.log(e);
let MutationSearchData = this.state.MutationSearchData;
let all_idselect_data=[]
MutationSearchData.idselect_data=all_idselect_data
this.setState(()=>({MutationSearchData:MutationSearchData }))
}
}
getMutationList=()=>{
let data= JSON.parse(JSON.stringify(this.state.MutationSearchData))
data.idselect_data= data.idselect_data.toString()
this.setState(()=>({loading:true }))
request.post('/mutation_search', qs.stringify(data) )
.then(res => {
this.setState(()=>({loading:false }))
if (res.data.code===200) {
console.log(data);
this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data)})
}else{
message.error(res.data.msg);
MutationSearchData.idselect_data = e;
this.setState(() => ({ MutationSearchData: MutationSearchData }));
};
onAllChange = (e) => {
if (e.target.checked) {
let MutationSearchData = this.state.MutationSearchData;
let all_idselect_data = ['TM1', 'TM4', 'TM7', 'ICL3', 'ECL3', 'N-Term', 'ECL1', 'ICL1', 'TM5', 'TM2', 'TM3', 'TM6', 'ICL2', 'ECL2', 'C-Term'];
MutationSearchData.idselect_data = all_idselect_data;
this.setState(() => ({ MutationSearchData: MutationSearchData }));
} else {
let MutationSearchData = this.state.MutationSearchData;
let all_idselect_data = [];
MutationSearchData.idselect_data = all_idselect_data;
this.setState(() => ({ MutationSearchData: MutationSearchData }));
}
})
.catch(err => {
console.error(err);
})
}
childClassChange3=(e)=>{
console.log(e);
let MutationSearchData = this.state.MutationSearchData;
MutationSearchData.target_families=e
this.setState(()=>({MutationSearchData:MutationSearchData }))
}
getClassData3=(e)=>{
console.log(e);
this.setState(()=>({classData:e }))
let MutationSearchData = this.state.MutationSearchData;
MutationSearchData.target_class=e
this.setState(()=>({MutationSearchData:MutationSearchData }))
let value =this.state.allClassList
let childData=value[e]
console.log(childData);
this.setState(()=>({childClassList:childData}))
}
getMutationValue=(e)=>{
const { value } = e.target;
let MutationSearchData = this.state.MutationSearchData;
MutationSearchData.target_data=value
this.setState(()=>({MutationSearchData:MutationSearchData }))
}
getChemblValue=(e)=>{
const { value } = e.target;
let MutationSearchData = this.state.MutationSearchData;
MutationSearchData.chembl_id=value
this.setState(()=>({MutationSearchData:MutationSearchData }))
}
// Indication
getIndicationValue=(e)=>{
const { value } = e.target;
let IndicationSearchData = this.state.IndicationSearchData;
IndicationSearchData.indication=value
this.setState(()=>({IndicationSearchData:IndicationSearchData }))
}
getIndicationList=()=>{
let data=this.state.IndicationSearchData
if (data.indication == '') {
return message.warning('请输入查询条件！')
}
this.setState(()=>({loading:true }))
request.post('/kinase/indication_search', data )
.then(res => {
this.setState(()=>({loading:false }))
if (res.data.code===200) {
this.props.history.push({ pathname: '/Kinase/IndicationDetails', search: qs.stringify(data)})
}else{
message.error(res.data.msg);
}
})
.catch(err => {
console.error(err);
})
}
// ligend
getLigendValue=(e)=>{
const { value } = e.target;
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.ligand_data=value
this.setState(()=>({ligandSearchData:ligandSearchData }))
}
};
getMutationList = () => {
let data = JSON.parse(JSON.stringify(this.state.MutationSearchData));
data.idselect_data = data.idselect_data.toString();
this.setState(() => ({ loading: true }));
request
.post('/mutation_search', qs.stringify(data))
.then((res) => {
this.setState(() => ({ loading: false }));
if (res.data.code === 200) {
console.log(data);
this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data) });
} else {
message.error(res.data.msg);
}
})
.catch((err) => {
console.error(err);
});
};
childClassChange3 = (e) => {
console.log(e);
let MutationSearchData = this.state.MutationSearchData;
MutationSearchData.target_families = e;
this.setState(() => ({ MutationSearchData: MutationSearchData }));
};
getClassData3 = (e) => {
console.log(e);
this.setState(() => ({ classData: e }));
let MutationSearchData = this.state.MutationSearchData;
MutationSearchData.target_class = e;
this.setState(() => ({ MutationSearchData: MutationSearchData }));
let value = this.state.allClassList;
let childData = value[e];
console.log(childData);
this.setState(() => ({ childClassList: childData }));
};
getMutationValue = (e) => {
const { value } = e.target;
let MutationSearchData = this.state.MutationSearchData;
MutationSearchData.target_data = value;
this.setState(() => ({ MutationSearchData: MutationSearchData }));
};
getChemblValue = (e) => {
const { value } = e.target;
let MutationSearchData = this.state.MutationSearchData;
MutationSearchData.chembl_id = value;
this.setState(() => ({ MutationSearchData: MutationSearchData }));
};
// Indication
logSmiles2=(e)=>{
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.ligand_data =e
this.setState(()=>({ligandSearchData:ligandSearchData }))
// this.setState(()=>({data:e }))
}
getLigendList=()=>{
let data=this.state.ligandSearchData
if (data.ligand_data == '') {
return message.warning('请输入查询条件！')
}
this.setState(()=>({loading:true }))
request.post('/kinase/ligand_search', data )
.then(res => {
console.log(res)
this.setState(()=>({loading:false }))
if (res.data.code===200) {
this.props.history.push({ pathname: '/Kinase/SearchList', search: qs.stringify(data)})
}else{
message.error(res.data.msg);
getIndicationValue = (e) => {
const { value } = e.target;
let IndicationSearchData = this.state.IndicationSearchData;
IndicationSearchData.indication = value;
this.setState(() => ({ IndicationSearchData: IndicationSearchData }));
};
getIndicationList = () => {
let data = this.state.IndicationSearchData;
if (data.indication == '') {
return message.warning('请输入查询条件！');
}
})
.catch(err => {
console.error(err);
})
}
getLigandData=(e)=>{
const { value } = e.target;
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.target_data=value
this.setState(()=>({ligandSearchData:ligandSearchData }))
}
ligandChange=(e)=>{
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.target_type =e
this.setState(()=>({ligandSearchData:ligandSearchData }))
}
childClassChange2=(e)=>{
console.log(e);
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.target_families=e
this.setState(()=>({ligandSearchData:ligandSearchData }))
}
getClassData2=(e)=>{
console.log(e);
this.setState(()=>({classData:e }))
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.target_class=e
this.setState(()=>({ligandSearchData:ligandSearchData }))
let value =this.state.allClassList
let childData=value[e]
console.log(childData);
this.setState(()=>({childClassList:childData}))
}
// Target
getTargetClassData=(e)=>{
this.setState(()=>({classData:e }))
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.target_family=''
this.setState(()=>({TargetSearchData:TargetSearchData }))
TargetSearchData.target_class=e
this.setState(()=>({TargetSearchData:TargetSearchData }))
let value =this.state.TargetClassList
value.map((item)=>{
if (item.name===e) {
this.setState(()=>({TargetChildClassList:item.content}))
this.setState(() => ({ loading: true }));
request
.post('/kinase/indication_search', data)
.then((res) => {
this.setState(() => ({ loading: false }));
if (res.data.code === 200) {
this.props.history.push({ pathname: '/Kinase/IndicationDetails', search: qs.stringify(data) });
} else {
message.error(res.data.msg);
}
})
.catch((err) => {
console.error(err);
});
};
// ligend
getLigendValue = (e) => {
const { value } = e.target;
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.ligand_data = value;
this.setState(() => ({ ligandSearchData: ligandSearchData }));
};
logSmiles2 = (e) => {
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.ligand_data = e;
this.setState(() => ({ ligandSearchData: ligandSearchData }));
// this.setState(()=>({data:e }))
};
getLigendList = () => {
let data = this.state.ligandSearchData;
if (data.ligand_data == '') {
return message.warning('请输入查询条件！');
}
this.setState(() => ({ loading: true }));
request
.post('/kinase/ligand_search', data)
.then((res) => {
console.log(res);
this.setState(() => ({ loading: false }));
if (res.data.code === 200) {
this.props.history.push({ pathname: '/Kinase/SearchList', search: qs.stringify(data) });
} else {
message.error(res.data.msg);
}
})
.catch((err) => {
console.error(err);
});
};
getLigandData = (e) => {
const { value } = e.target;
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.target_data = value;
this.setState(() => ({ ligandSearchData: ligandSearchData }));
};
ligandChange = (e) => {
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.target_type = e;
this.setState(() => ({ ligandSearchData: ligandSearchData }));
};
childClassChange2 = (e) => {
console.log(e);
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.target_families = e;
this.setState(() => ({ ligandSearchData: ligandSearchData }));
};
getClassData2 = (e) => {
console.log(e);
this.setState(() => ({ classData: e }));
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.target_class = e;
this.setState(() => ({ ligandSearchData: ligandSearchData }));
let value = this.state.allClassList;
let childData = value[e];
console.log(childData);
this.setState(() => ({ childClassList: childData }));
};
// Target
getTargetClassData = (e) => {
this.setState(() => ({ classData: e }));
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.target_family = '';
this.setState(() => ({ TargetSearchData: TargetSearchData }));
TargetSearchData.target_class = e;
this.setState(() => ({ TargetSearchData: TargetSearchData }));
let value = this.state.TargetClassList;
value.map((item) => {
if (item.name === e) {
this.setState(() => ({ TargetChildClassList: item.content }));
}
});
})
// let childData=value[e]
// console.log(childData);
// this.setState(()=>({childClassList:childData}))
}
childTargetClassChange=(e)=>{
console.log(e);
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.target_family=e
this.setState(()=>({TargetSearchData:TargetSearchData }))
}
targetChange=(e)=>{
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.target_type =e
this.setState(()=>({TargetSearchData:TargetSearchData }))
// let childData=value[e]
// console.log(childData);
// this.setState(()=>({childClassList:childData}))
};
}
getindTargetication=(e)=>{
const { value } = e.target;
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.indication=value
this.setState(()=>({TargetSearchData:TargetSearchData }))
}
getTargetData2=(e)=>{
const { value } = e.target;
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.target_data=value
this.setState(()=>({TargetSearchData:TargetSearchData }))
}
get_drug_name=(e)=>{
const { value } = e.target;
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.drug_name=value
this.setState(()=>({TargetSearchData:TargetSearchData }))
}
getTargetList=()=>{
let data=this.state.TargetSearchData
if (data.target_class == '' && data.target_data == '') {
return message.warning('请输入查询条件！')
}
this.setState(()=>({loading:true }))
request.post('/kinase/targets_search', data )
.then(res => {
console.log(res)
this.setState(()=>({loading:false }))
if (res.data.code===200) {
this.props.history.push({ pathname: '/Kinase/SearchList', search: qs.stringify(data)})
}else{
message.error(res.data.msg);
childTargetClassChange = (e) => {
console.log(e);
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.target_family = e;
this.setState(() => ({ TargetSearchData: TargetSearchData }));
};
targetChange = (e) => {
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.target_type = e;
this.setState(() => ({ TargetSearchData: TargetSearchData }));
};
getindTargetication = (e) => {
const { value } = e.target;
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.indication = value;
this.setState(() => ({ TargetSearchData: TargetSearchData }));
};
getTargetData2 = (e) => {
const { value } = e.target;
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.target_data = value;
this.setState(() => ({ TargetSearchData: TargetSearchData }));
};
get_drug_name = (e) => {
const { value } = e.target;
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.drug_name = value;
this.setState(() => ({ TargetSearchData: TargetSearchData }));
};
getTargetList = () => {
let data = this.state.TargetSearchData;
if (data.target_class == '' && data.target_data == '') {
return message.warning('请输入查询条件！');
}
})
.catch(err => {
console.error(err);
})
}
onChangeCheckbox=(e)=>{
console.log(e);
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.select_status=e
this.setState(()=>({TargetSearchData:TargetSearchData}))
console.log(this.state.TargetSearchData);
}
handleChange=(e)=>{
this.setState(() => ({ loading: true }));
request
.post('/kinase/targets_search', data)
.then((res) => {
console.log(res);
this.setState(() => ({ loading: false }));
if (res.data.code === 200) {
this.props.history.push({ pathname: '/Kinase/SearchList', search: qs.stringify(data) });
} else {
message.error(res.data.msg);
}
})
.catch((err) => {
console.error(err);
});
};
onChangeCheckbox = (e) => {
console.log(e);
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.select_status = e;
this.setState(() => ({ TargetSearchData: TargetSearchData }));
console.log(this.state.TargetSearchData);
};
handleChange = (e) => {
console.log(e);
this.setState(()=>({select_db:e }))
if (e!='Ligands') {
this.setState(()=>({data:'' }))
this.setState(() => ({ select_db: e }));
if (e != 'Ligands') {
this.setState(() => ({ data: '' }));
}
}
childClassChange=(e)=>{
};
childClassChange = (e) => {
console.log(e);
let searchData = this.state.searchData;
searchData.target_families=e
this.setState(()=>({searchData:searchData }))
}
getClassData=(e)=>{
searchData.target_families = e;
this.setState(() => ({ searchData: searchData }));
};
getClassData = (e) => {
console.log(e);
this.setState(()=>({classData:e }))
this.setState(() => ({ classData: e }));
let searchData = this.state.searchData;
searchData.target_class=e
this.setState(()=>({searchData:searchData }))
searchData.target_class = e;
this.setState(() => ({ searchData: searchData }));
console.log(this.state.searchData);
let value =this.state.allClassList
let childData=value[e]
let value = this.state.allClassList;
let childData = value[e];
console.log(childData);
this.setState(()=>({childClassList:childData}))
}
targetChange=(e)=>{
this.setState(() => ({ childClassList: childData }));
};
targetChange = (e) => {
let searchData = this.state.searchData;
searchData.target_type =e
this.setState(()=>({searchData:searchData }))
}
logSmiles=(e)=>{
searchData.target_type = e;
this.setState(() => ({ searchData: searchData }));
};
logSmiles = (e) => {
let searchData = this.state.searchData;
searchData.drugs_data =e
this.setState(()=>({searchData:searchData }))
searchData.drugs_data = e;
this.setState(() => ({ searchData: searchData }));
// this.setState(()=>({data:e }))
}
componentDidMount(){
};
componentDidMount() {
// this.getList()
// this.getSelectList()
this.getTargetSelectList()
this.getTargetSelectList();
}
getSelectList=()=>{
request.get('/kinase/target_class/drug')
.then(res => {
console.log(res)
if (res.data.code===200) {
console.log(res.data.data);
this.setState({
classList: Object.keys(res.data.data),
allClassList:res.data.data
getSelectList = () => {
request
.get('/kinase/target_class/drug')
.then((res) => {
console.log(res);
if (res.data.code === 200) {
console.log(res.data.data);
this.setState({
classList: Object.keys(res.data.data),
allClassList: res.data.data,
});
console.log(this.state);
} else {
message.error(res.data.msg);
}
})
.catch((err) => {
console.error(err);
});
};
getTargetSelectList = () => {
// debugger
// alert(11);
// localStorage.getItem('token') &&
request
.get('/kinase/target_class/target')
.then((res) => {
console.log(res);
if (res.data.code === 200) {
console.log(res.data.data);
this.setState({
TargetClassList: res.data.data,
TargetAllClassList: res.data.data,
});
console.log(this.state);
} else {
message.error(res.data.msg);
}
})
console.log(this.state );
}else{
message.error(res.data.msg);
}
})
.catch(err => {
console.error(err);
})
}
getTargetSelectList=()=>{
request.get('/kinase/target_class/target')
.then(res => {
console.log(res)
if (res.data.code===200) {
console.log(res.data.data);
this.setState({
TargetClassList: res.data.data,
TargetAllClassList:res.data.data
})
console.log(this.state );
}else{
message.error(res.data.msg);
}
})
.catch(err => {
console.error(err);
})
}
getValue=(e)=>{
.catch((err) => {
console.error(err);
});
};
getValue = (e) => {
const { value } = e.target;
let searchData = this.state.searchData;
searchData.drugs_data=value
this.setState(()=>({searchData:searchData }))
}
getindication=(e)=>{
searchData.drugs_data = value;
this.setState(() => ({ searchData: searchData }));
};
getindication = (e) => {
const { value } = e.target;
let searchData = this.state.searchData;
searchData.indication=value
this.setState(()=>({searchData:searchData }))
}
getTargetData=(e)=>{
searchData.indication = value;
this.setState(() => ({ searchData: searchData }));
};
getTargetData = (e) => {
const { value } = e.target;
let searchData = this.state.searchData;
searchData.target_data=value
this.setState(()=>({searchData:searchData }))
}
onChangeRadio = (e) => {
searchData.target_data = value;
this.setState(() => ({ searchData: searchData }));
};
let value = e.target.value
let searchData = this.state.searchData
searchData.pdb_status = value
onChangeRadio = (e) => {
let value = e.target.value;
let searchData = this.state.searchData;
searchData.pdb_status = value;
this.setState({
searchData: searchData,
})
}
});
};
onChangeRadio2 = (e) => {
let value = e.target.value
let TargetSearchData = this.state.TargetSearchData
TargetSearchData.pdb_status = value
let value = e.target.value;
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.pdb_status = value;
this.setState({
TargetSearchData: TargetSearchData,
})
}
});
};
onChangeRadio3 = (e) => {
let value = e.target.value
let searchData = this.state.searchData
searchData.finger = value
let value = e.target.value;
let searchData = this.state.searchData;
searchData.finger = value;
this.setState({
searchData: searchData,
})
}
});
};
onChangeRadio4 = (e) => {
let value = e.target.value
let ligandSearchData = this.state.ligandSearchData
ligandSearchData.finger = value
let value = e.target.value;
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.finger = value;
this.setState({
ligandSearchData: ligandSearchData,
})
}
getList=()=>{
let data=this.state.searchData
request.post('/ligand_search', qs.stringify(data) )
.then(res => {
console.log(res)
if (res.data.code===200) {
this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data)})
}else{
message.error(res.data.msg);
}
})
.catch(err => {
console.error(err);
})
}
getDrugsList=()=>{
let data=this.state.searchData
});
};
getList = () => {
let data = this.state.searchData;
request
.post('/ligand_search', qs.stringify(data))
.then((res) => {
console.log(res);
if (res.data.code === 200) {
this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data) });
} else {
message.error(res.data.msg);
}
})
.catch((err) => {
console.error(err);
});
};
getDrugsList = () => {
let data = this.state.searchData;
if (data.drugs_data == '') {
return message.warning('请输入查询条件！')
return message.warning('请输入查询条件！');
}
this.setState(()=>({loading:true }))
request.post('/kinase/drug_search', data )
.then(res => {
console.log(res)
this.setState(()=>({loading:false }))
if (res.data.code===200) {
this.props.history.push({ pathname: '/kinase/SearchList', search: qs.stringify(data)})
}else{
message.error(res.data.msg);
}
})
.catch(err => {
console.error(err);
})
}
getDraw=()=>{
this.setState(()=>({draw:!this.state.draw }))
}
compoundChange=(e)=>{
this.setState(() => ({ loading: true }));
this.props.history.push({ pathname: '/kinase/SearchList', search: qs.stringify(data) });
// request
// .post('/kinase/drug_search', data)
// .then((res) => {
// console.log(res);
// this.setState(() => ({ loading: false }));
// if (res.data.code === 200) {
// this.props.history.push({ pathname: '/kinase/SearchList', search: qs.stringify(data) });
// } else {
// message.error(res.data.msg);
// }
// })
// .catch((err) => {
// console.error(err);
// });
};
getDraw = () => {
this.setState(() => ({ draw: !this.state.draw }));
};
compoundChange = (e) => {
console.log(e);
let searchData = this.state.searchData;
searchData.drugs_type=e
this.setState(()=>({searchData:searchData }))
console.log(this.state.searchData)
}
callback=(e)=>{
console.log(e);
let searchData = this.state.searchData;
searchData.name=e
this.setState(()=>({searchData:searchData }))
console.log(this.state.searchData);
}
getJsme=()=>{
searchData.drugs_type = e;
this.setState(() => ({ searchData: searchData }));
console.log(this.state.searchData);
};
callback = (e) => {
console.log(e);
let searchData = this.state.searchData;
searchData.name = e;
this.setState(() => ({ searchData: searchData }));
console.log(this.state.searchData);
};
getJsme = () => {
console.log(1);
}
};
render() {
const {select_db,data,data_type,optionsList,draw,SelectList,targetList,classList,classData,childClassList,compoundList,TargetClassList,TargetChildClassList}=this.state
const formItemLayout ={
const { select_db, data, data_type, optionsList, draw, SelectList, targetList, classList, classData, childClassList, compoundList, TargetClassList, TargetChildClassList } = this.state;
const formItemLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 12 },
}
};
const formTailLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 12, offset: 8 },
......@@ -565,79 +524,48 @@ onChangeCheckbox=(e)=>{
<div className='home'>
<div className='home-div'>
{/* <LogoTitlte></LogoTitlte> */}
<Tabs onChange={this.callback} type="card">
<TabPane tab="Drug" key="Drug">
<div className="top-div">
<Tabs onChange={this.callback} type='card'>
<TabPane tab='Drug' key='Drug'>
<div className='top-div'>
<div>
<Form layout="horizontal">
<Form.Item label="请输入药物名或Smiles" {...formItemLayout}>
<Input
placeholder="请输入化合物"
style={{ width: 250 }}
size="large"
onChange={this.getValue}
value={this.state.searchData.drugs_data}
/>
<Form layout='horizontal'>
<Form.Item label='请输入药物名或Smiles' {...formItemLayout}>
<Input placeholder='请输入化合物' style={{ width: 250 }} size='large' onChange={this.getValue} value={this.state.searchData.drugs_data} />
</Form.Item>
<Form.Item label="" {...formTailLayout}>
<Button
type="primary"
style={{ marginRight: '50px' }}
onClick={this.getDraw}>
<Form.Item label='' {...formTailLayout}>
<Button type='primary' style={{ marginRight: '50px' }} onClick={this.getDraw}>
画结构
</Button>
<div
className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}
>
<Radio.Group
onChange={this.onChangeRadio3}
value={this.state.searchData.finger}>
<div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}>
<Radio.Group onChange={this.onChangeRadio3} value={this.state.searchData.finger}>
<Radio value={0}>Substructure</Radio>
{/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
<Radio value={1}>Similar Structure</Radio>
</Radio.Group>
</div>
<div
className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}
onClick={this.getJsme}>
<Jsme
height="500px"
width="700px"
options="oldlook,star"
onChange={this.logSmiles}
/>
<div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'} onClick={this.getJsme}>
<Jsme height='500px' width='700px' options='oldlook,star' onChange={this.logSmiles} />
</div>
</Form.Item>
<Form.Item label="使用PDB查询" {...formItemLayout}>
<Radio.Group
onChange={this.onChangeRadio}
value={this.state.searchData.pdb_status}>
<Form.Item label='使用PDB查询' {...formItemLayout}>
<Radio.Group onChange={this.onChangeRadio} value={this.state.searchData.pdb_status}>
<Radio value={0}>不使用</Radio>
{/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
<Radio value={2}>有PDB结构</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label=""
{...formTailLayout}>
<Button
type="primary"
style={{ width: 150 }}
size="large"
loading={this.state.loading}
onClick={this.getDrugsList}>
<Form.Item label='' {...formTailLayout}>
<Button type='primary' style={{ width: 150 }} size='large' loading={this.state.loading} onClick={this.getDrugsList}>
Search
</Button>
</Form.Item>
<Form.Item label="Tips" {...formTailLayout2}>
<div className='Tips-div'>
<Form.Item label='Tips' {...formTailLayout2}>
<div className='Tips-div'>
<div>1.本页面提供Kinase相关药物的搜索。</div>
<div>2.您可以直接使用药物名称或者ChEMBL ID进行搜索。</div>
<div>3.您可以使用所需结构或者结构片段以及对应的Smiles进行搜索。</div>
<div> 4.您可以筛选其中有PDB结构的配体进行搜索。</div>
<div> 4.您可以筛选其中有PDB结构的配体进行搜索。</div>
<div> 5.您可以根据所查看靶点来检索配体。</div>
</div>
</Form.Item>
......@@ -645,156 +573,98 @@ onChangeCheckbox=(e)=>{
</div>
</div>
</TabPane>
<TabPane tab="Target" key="Target">
<div className="top-div">
<TabPane tab='Target' key='Target'>
<div className='top-div'>
<div>
<Form layout="horizontal">
<Form.Item label="请选择Class" {...formItemLayout}>
<Select
value={this.state.TargetSearchData.target_class}
style={{ width: 250 }}
size="large"
placeholder="请选择"
onChange={this.getTargetClassData}>
{TargetClassList.map((item, index) => {
return (
<Option key={index} value={item.name}>
{item.name}({item.number})
</Option>
)
})}
<Form layout='horizontal'>
<Form.Item label='请选择Class' {...formItemLayout}>
<Select value={this.state.TargetSearchData.target_class} style={{ width: 250 }} size='large' placeholder='请选择' onChange={this.getTargetClassData}>
{TargetClassList &&
TargetClassList.length > 0 &&
TargetClassList.map((item, index) => {
return (
<Option key={index} value={item.class}>
{item.class}
{/* {item.name}({item.number}) */}
</Option>
);
})}
</Select>
<Select
value={this.state.TargetSearchData.target_family}
style={{ width: 250 }}
size="large"
placeholder="请选择"
onChange={this.childTargetClassChange}>
{TargetChildClassList.map((item, index) => {
return (
<Option key={index} value={item.name}>
{item.name} ({item.number})
</Option>
)
})}
<Select value={this.state.TargetSearchData.target_family} style={{ width: 250 }} size='large' placeholder='请选择' onChange={this.childTargetClassChange}>
{TargetChildClassList &&
TargetChildClassList.length > 0 &&
TargetChildClassList.map((item, index) => {
return (
<Option key={index} value={item.name}>
{item.name} ({item.number})
</Option>
);
})}
</Select>
</Form.Item>
<Form.Item
label="请输入Target name或Uniprot id"
{...formItemLayout}>
<Input
placeholder="请输入"
style={{ width: 250 }}
size="large"
onChange={this.getTargetData2}
value={this.state.TargetSearchData.target_data}
/>
<Form.Item label='请输入Target name或Uniprot id' {...formItemLayout}>
<Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getTargetData2} value={this.state.TargetSearchData.target_data} />
</Form.Item>
<Form.Item label="使用PDB查询" {...formItemLayout}>
<Radio.Group
onChange={this.onChangeRadio2}
value={this.state.TargetSearchData.pdb_status}>
<Form.Item label='使用PDB查询' {...formItemLayout}>
<Radio.Group onChange={this.onChangeRadio2} value={this.state.TargetSearchData.pdb_status}>
<Radio value={0}>不使用</Radio>
{/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
<Radio value={2}>有PDB结构</Radio>
</Radio.Group>
</Form.Item>
<Form.Item
label=""
{...formTailLayout}>
<Button
type="primary"
style={{ width: 150 }}
size="large"
loading={this.state.loading}
onClick={this.getTargetList}>
<Form.Item label='' {...formTailLayout}>
<Button type='primary' style={{ width: 150 }} size='large' loading={this.state.loading} onClick={this.getTargetList}>
Search
</Button>
</Form.Item>
<Form.Item label="Tips" {...formTailLayout2}>
<div className='Tips-div'>
<div>1. 本页面提供Kinase相关靶点数据检索功能。</div>
<div>2. 您可以直接检索靶点Uniprot名称或者ID，精准搜索您所需要的靶点。</div>
<div>3. 您可以选择查看有PDB结构的靶点。</div>
<Form.Item label='Tips' {...formTailLayout2}>
<div className='Tips-div'>
<div>1. 本页面提供Kinase相关靶点数据检索功能。</div>
<div>2. 您可以直接检索靶点Uniprot名称或者ID，精准搜索您所需要的靶点。</div>
<div>3. 您可以选择查看有PDB结构的靶点。</div>
</div>
</Form.Item>
</Form>
</div>
</div>
</TabPane>
<TabPane tab="Ligand" key="Ligand">
<div className="top-div">
<TabPane tab='Ligand' key='Ligand'>
<div className='top-div'>
<div>
<Form layout="horizontal">
<Form.Item label="输入Chemblid或Smiles" {...formItemLayout}>
<Input
placeholder="请输入"
style={{ width: 250 }}
size="large"
onChange={this.getLigendValue}
value={this.state.ligandSearchData.ligand_data}
/>
<Form layout='horizontal'>
<Form.Item label='输入Chemblid或Smiles' {...formItemLayout}>
<Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getLigendValue} value={this.state.ligandSearchData.ligand_data} />
</Form.Item>
<Form.Item label="" {...formTailLayout}>
<Button
type="primary"
style={{ marginRight: '50px' }}
onClick={this.getDraw}>
<Form.Item label='' {...formTailLayout}>
<Button type='primary' style={{ marginRight: '50px' }} onClick={this.getDraw}>
画结构
</Button>
<Button
type="primary"
style={{ marginLeft: 50, width: 150 }}
size="large"
loading={this.state.loading}
onClick={this.getLigendList}>
<Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getLigendList}>
Search
</Button>
<div
className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}
>
<Radio.Group
onChange={this.onChangeRadio4}
value={this.state.ligandSearchData.finger}>
<div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}>
<Radio.Group onChange={this.onChangeRadio4} value={this.state.ligandSearchData.finger}>
<Radio value={0}>Substructure</Radio>
{/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
<Radio value={1}>Similar Structure</Radio>
</Radio.Group>
</div>
<div
className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}
onClick={this.getJsme}>
<Jsme
height="500px"
width="700px"
options="oldlook,star"
onChange={this.logSmiles2}
/>
<div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'} onClick={this.getJsme}>
<Jsme height='500px' width='700px' options='oldlook,star' onChange={this.logSmiles2} />
</div>
</Form.Item>
</Form>
</div>
</div>
</TabPane>
<TabPane tab="Indication" key="Indication">
<div className="top-div">
<TabPane tab='Indication' key='Indication'>
<div className='top-div'>
<div>
<Form layout="horizontal">
<Form.Item label="输入适应症进行检索" {...formItemLayout}>
<Input
placeholder="请输入适应症"
style={{ width: 250 }}
size="large"
onChange={this.getIndicationValue}
value={this.state.IndicationSearchData.indication}
/>
<Button
type="primary"
style={{ marginLeft: 50, width: 150 }}
size="large"
loading={this.state.loading}
onClick={this.getIndicationList}>
<Form layout='horizontal'>
<Form.Item label='输入适应症进行检索' {...formItemLayout}>
<Input placeholder='请输入适应症' style={{ width: 250 }} size='large' onChange={this.getIndicationValue} value={this.state.IndicationSearchData.indication} />
<Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getIndicationList}>
Search
</Button>
</Form.Item>
......@@ -803,11 +673,10 @@ onChangeCheckbox=(e)=>{
</div>
</TabPane>
</Tabs>
</div>
</div>
)
);
}
}
export default Home
\ No newline at end of file
export default Home;
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 md5 from 'js-md5';
import qs from 'qs'
......
src/routes/Login/index.js
import React from 'react'
import BGParticle from '../../utils/BGParticle'
import { notification } from 'antd'
import './style.css'
import { withRouter } from 'react-router-dom'
import { inject, observer } from 'mobx-react/index'
import Loading2 from '../../components/Loading2'
import {preloadingImages} from '../../utils/utils'
import LogoTitlte from '../../components/LogoTitlte/index'
import 'animate.css'
import LoginForm from './LoginForm'
import RegisterForm from './RegisterForm'
import React from 'react';
import BGParticle from '../../utils/BGParticle';
import { notification } from 'antd';
import './style.css';
import { withRouter } from 'react-router-dom';
import { inject, observer } from 'mobx-react/index';
import Loading2 from '../../components/Loading2';
import { preloadingImages } from '../../utils/utils';
import LogoTitlte from '../../components/LogoTitlte/index';
import 'animate.css';
import LoginForm from './LoginForm';
import RegisterForm from './RegisterForm';
const url = ''
const url = '';
const imgs = [
// 'http://47.99.130.140/imgs/wallhaven-p8r1e9.jpg',
// 'http://47.99.130.140/imgs/wallhaven-e7zyy8.jpg',
// 'http://47.99.130.140/imgs/wallhaven-6k9e7q.jpg',
// 'http://47.99.130.140/imgs/photo.jpg',
]
];
@withRouter @inject('appStore') @observer
@withRouter //更新的作用
@inject('appStore') //接收
@observer //组件变为响应式
//这三步会把对应的store挂在props上
class Login extends React.Component {
state = {
showBox: 'login', //展示当前表单
url: '', //背景图片
loading:false,
loading2:false,
}
showBox: 'login', //展示当前表单
url: '', //背景图片
loading: false,
loading2: false,
};
componentDidMount () {
this.props.appStore.toggleLogin(true, { username: 'username' })
componentDidMount() {
this.props.appStore.toggleLogin(true, { username: 'username' });
// const { from } = this.props.location.state || { from: { pathname: '/Kinase' } }
const { from } = this.props.location.state || { from: { pathname: '/login' } }
this.props.history.push(from)
const { from } = this.props.location.state || { from: { pathname: '/login' } };
this.props.history.push(from);
}
componentWillUnmount () {
this.particle && this.particle.destory()
notification.destroy()
componentWillUnmount() {
this.particle && this.particle.destory();
notification.destroy();
}
//载入页面时的一些处理
initPage = () => {
this.setState({
loading:true
})
this.props.appStore.initUsers()
this.loadImageAsync(url).then(url=>{
this.setState({
loading:false,
url
loading: true,
});
this.props.appStore.initUsers();
this.loadImageAsync(url)
.then((url) => {
this.setState({
loading: false,
url,
});
})
}).then(()=>{
//为什么写在then里？id为backgroundBox的DOM元素是在loading为false时才有，而上面的setState可能是异步的，必须等到setState执行完成后才去获取dom
this.particle = new BGParticle('backgroundBox')
this.particle.init()
// notification.open({
// message:<ul><li>初始账号：admin</li><li>初始密码：admin</li></ul>,
// duration:0,
// className:'login-notification'
// })
})
}
.then(() => {
//为什么写在then里？id为backgroundBox的DOM元素是在loading为false时才有，而上面的setState可能是异步的，必须等到setState执行完成后才去获取dom
this.particle = new BGParticle('backgroundBox');
this.particle.init();
// notification.open({
// message:<ul><li>初始账号：admin</li><li>初始密码：admin</li></ul>,
// duration:0,
// className:'login-notification'
// })
});
};
//切换showbox
switchShowBox = (box) => {
this.setState({
showBox: box
})
}
showBox: box,
});
};
//登录的背景图太大，等载入完后再显示，实际上是图片预加载，
loadImageAsync (url) {
loadImageAsync(url) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() {
resolve(url);
};
image.onerror = function() {
console.log('图片载入错误')
console.log('图片载入错误');
};
image.src = url;
});
}
render () {
const {showBox,loading} = this.state
render() {
const { showBox, loading } = this.state;
return (
<div className='index-div'>
<LogoTitlte></LogoTitlte>
<LogoTitlte />
<div id='login-page'>
<div className='home-page-div'>
<div>Yashen API 是一个集成了化学、生物学、计算化学、计算生物学和机器学习的数据驱动的药物发现平台，帮助药物化学家在药物智能发现领域大展身手。</div>
<div>我们的Kinase平台专注于挖掘包括药物和配体结构、蛋白质结构在内的Kinase数据，并开发计算工具来加速Kinase药物发现。</div>
<div> Yashen API is a data-driven drug discovery platform, which integrates chemistry, biology, computational chemistry, computational biology and machine learning to empower medicinal chemists to make intelligence drug discovery decisions.</div>
<div>Our Kinase platform focuses on mining available Kinase knowledge including corresponding drugs and ligands structure and protein structures data, and developing computational tools to accelerate Kinase drug discovery.</div>
<div className='home-page-div'>
<div>Yashen API 是一个集成了化学、生物学、计算化学、计算生物学和机器学习的数据驱动的药物发现平台，帮助药物化学家在药物智能发现领域大展身手。</div>
<div>我们的Kinase平台专注于挖掘包括药物和配体结构、蛋白质结构在内的Kinase数据，并开发计算工具来加速Kinase药物发现。</div>
<div>
{' '}
Yashen API is a data-driven drug discovery platform, which integrates chemistry, biology, computational chemistry, computational biology and machine learning to empower medicinal
chemists to make intelligence drug discovery decisions.
</div>
<div>
Our Kinase platform focuses on mining available Kinase knowledge including corresponding drugs and ligands structure and protein structures data, and developing computational tools to
accelerate Kinase drug discovery.
</div>
</div>
{
<div>
<div id='backgroundBox' style={styles.backgroundBox}/>
<div className='container'>
<LoginForm
className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'}
switchShowBox={this.switchShowBox}/>
<RegisterForm
className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'}
switchShowBox={this.switchShowBox}/>
</div>
<div>
<div id='backgroundBox' style={styles.backgroundBox} />
<div className='container'>
<LoginForm className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
<RegisterForm className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
</div>
</div>
}
</div>
</div>
)
);
}
}
......@@ -129,30 +130,30 @@ const styles = {
height: '100vh',
// backgroundImage: `url(${url})`,
backgroundSize: 'cover',
transition:'all .5s',
transition: 'all .5s',
// backgroundColor: '#4FA1D9'
},
focus: {
// transform: 'scale(0.7)',
width: '20px',
opacity: 1
opacity: 1,
},
loadingBox:{
position:'fixed',
top:'50%',
left:'50%',
transform:'translate(-50%,-50%)'
loadingBox: {
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
},
loadingTitle:{
position:'fixed',
top:'50%',
left:'50%',
loadingTitle: {
position: 'fixed',
top: '50%',
left: '50%',
marginLeft: -45,
marginTop: -18,
color:'#000',
fontWeight:500,
fontSize:24
color: '#000',
fontWeight: 500,
fontSize: 24,
},
}
};
export default Login
export default Login;
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/routes/drugbank/IndicationDetails/index.js
......@@ -9,7 +9,7 @@ import {
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/drugbank/LigandDetails/index.js
......@@ -18,7 +18,7 @@ import {
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/drugbank/SearchDetails/index.js
......@@ -18,7 +18,7 @@ import {
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/drugbank/SearchList/index.js
import React, { Component } from "react";
import { Jsme } from "jsme-react";
import { Card, Button, Pagination, Tabs, Spin, message, Collapse } from "antd";
import { request } from "../../../utils/request";
import request from "../../../utils/request";
import qs from "qs";
import "./index.css";
const { TabPane } = Tabs;
......
src/routes/drugbank/TargetDetails/index.js
......@@ -19,7 +19,7 @@ import {
Typography,
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/drugbank/index.js
......@@ -3,7 +3,7 @@ import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from
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/utils/request-login.js 0 → 100644
import axios from 'axios';
import { getQueryString } from './utils';
import { message } from 'antd';
//禁用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;
};
}
// disableF12();
const baseURL = 'http://52.83.169.190:8002/'; //线上正式环境
// const baseURL = 'http://69.235.144.91:8002/'; 测试环境
//对axios二次封装
// console.log('getQueryString', getQueryString('token'));
// console.log('localStorage', localStorage.getItem('token'));
const token = getQueryString('token') || localStorage.getItem('token');
const request = axios.create({
baseURL,
timeout: 15000,
headers: {
// 'Content-Type': 'application/json',
// 部分接口需要formdate格式的数据 'Content-Type': 'application/x-www-form-urlencoded' qs.stringify(data)
accessToken: token,
},
});
function checkToken(config) {
// message.error('校验token');
// alert(' 校验token111');
request
.get('http://69.235.144.91:8048/yszh-login/auth/checkToken')
.then((res) => {
console.log('--res', res);
if (res.data.code === 200) {
console.log('token 检验通过');
return config;
} else {
localStorage.removeItem('token');
// alert(' 失败');
// message.error('请重新登录');
console.log('token校验没通过 返回登录页');
// window.open('http://localhost:3000/#/login');
window.open('http://localhost:3000/#/login', '_self');
}
})
.catch((err) => {
localStorage.removeItem('token');
// alert(' 服务器报错');
console.log('token校验没通过 返回登录页');
window.open('http://localhost:3000/#/login', '_self');
console.log('err', err);
return false;
});
}
checkToken();
//拦截器
request.interceptors.request.use((config) => {
// alert('拦截器..');
console.log('token---', '拦截器方法校验token');
console.log(config);
if (getQueryString('token') || localStorage.getItem('token')) {
checkToken(config);
} else {
console.log('token为空....');
window.open('http://localhost:3000/#/login');
}
});
request.interceptors.response.use(
(res) => {
return res;
},
(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/request.js
import axios from 'axios';
axios.defaults.timeout = 10000;
document.onkeydown = function() {
var e = window.event || arguments[0];
if (e.keyCode == 123) {
import { getQueryString } from './utils';
import { message } from 'antd';
//禁用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;
} else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
return false;
}
};
document.oncontextmenu = function() {
return false;
};
};
}
// disableF12();
var baseURL = 'http://52.83.169.190:8002/';
// const baseURL = 'http://52.83.169.190:8002/'; //线上正式环境
const baseURL = 'http://69.235.144.91:8002/'; // 测试环境
export const request = axios.create({
baseURL: baseURL,
//对axios二次封装
// console.log('getQueryString', getQueryString('token'));
// console.log('localStorage', localStorage.getItem('token'));
const token = getQueryString('token') || localStorage.getItem('token');
const request = axios.create({
baseURL,
timeout: 15000,
// headers: {
// 'Content-Type': 'application/json',
// accessToken: token,
// },
});
function checkToken(config) {
// message.error('校验token');
// alert('alert 校验token')
request
.get('http://69.235.144.91:8048/yszh-login/auth/checkToken')
.then((res) => {
console.log('checkToken--res', res);
if (res.data.code === 200) {
console.log('token 检验通过');
return config;
} else {
message.error('请重新登录');
console.log('token校验没通过 返回登录页');
window.open('http://localhost:3000/#/login');
// window.open('http://localhost:3000/#/login', '_self');
}
})
.catch((err) => {
console.log('token校验没通过 返回登录页');
window.open('http://localhost:3000/#/login', '_self');
console.log('err', err);
});
}
// checkToken();
//拦截器
// request.interceptors.request.use((config) => {
// console.log('token---', '拦截器方法校验token');
// if (!!token) {
// checkToken(config);
// return config;
// } else {
// console.log('token为空....');
// window.open('http://localhost:3000/#/login', '_self');
// }
// return config;
// });
// request.interceptors.response.use(
// (res) => {
// return res;
// },
// (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
......@@ -63,4 +63,18 @@ export function preloadingImages(arr) {
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;
}
\ No newline at end of file
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