Skip to content

E
elegantDeepKinase
Commit 72f1dc61 by wangshufen
Options

fixed:修改request.js token校验

parent a05cccab
Showing with 643 additions and 696 deletions
src/components/SiderNav/index.js
......@@ -12,16 +12,16 @@ const menus = [
icon: 'search',
key: '/Kinase',
},
{
title: 'PDB小分子搜索',
icon: 'search',
key: '/MolecularSearch',
},
{
title: '分子对接',
icon: '',
key: '/dockingUploadDetails',
},
// {
// title: 'PDB小分子搜索',
// icon: 'search',
// key: '/MolecularSearch',
// },
// {
// title: '分子对接',
// icon: '',
// key: '/dockingUploadDetails',
// },
{
title: 'Drugbank',
icon: 'medicine-box',
......
src/routes/Home/TargetDetails/index.js
......@@ -684,7 +684,7 @@ export default class TargetDetails extends Component {
columns={columnsMutation}
/>
</Panel>
<Panel header="Drug & Clinical imformation" key="4">
<Panel header="Drug & Clinical information" key="4">
<Table
bordered
rowKey='item'
......
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 './index.css'
import qs from 'qs'
const { Title } = Typography
import React, { Component } from 'react';
import { Pagination, message, Button, Tabs, Spin, Table, Tag, Typography } from 'antd';
import request from '../../../utils/request';
import './index.css';
import qs from 'qs';
const { Title } = Typography;
export default class IndicationDetails extends Component {
state = {
IndicationList: [],
smilesData: qs.parse(this.props.location.search.slice(1)),
total_num: 0
total_num: 0,
};
componentDidMount() {
this.getDetails();
}
componentDidMount () {
this.getDetails()
}
getDetails () {
this.setState({ loading: true })
request.post('/kinase/indication_search', this.state.smilesData)
.then(res => {
this.setState({ loading: false })
getDetails() {
this.setState({ loading: true });
request
.post('/kinase/indication_search', this.state.smilesData)
.then((res) => {
this.setState({ loading: false });
if (res.data.code === 200) {
this.setState({ IndicationList: res.data.data })
this.setState({ total_num: res.data.total_num })
this.setState({ IndicationList: res.data.data });
this.setState({ total_num: res.data.total_num });
} else {
message.error(res.data.msg)
message.error(res.data.msg);
}
})
.catch(err => {
console.error(err)
})
.catch((err) => {
console.error(err);
});
}
onShowSizeChange = (current, pageSize) => {
let smilesData = this.state.smilesData
smilesData.page = current
smilesData.page_size = pageSize
let smilesData = this.state.smilesData;
smilesData.page = current;
smilesData.page_size = pageSize;
this.setState({
smilesData
})
smilesData,
});
this.getDetails()
}
this.getDetails();
};
onChange = (current, pageSize) => {
let smilesData = this.state.smilesData
smilesData.page = current
smilesData.page_size = pageSize
let smilesData = this.state.smilesData;
smilesData.page = current;
smilesData.page_size = pageSize;
this.setState({
smilesData
})
this.getDetails()
}
getOne (e) {
console.log(e)
const { dataid, datatype } = e
smilesData,
});
this.getDetails();
};
getOne(e) {
console.log(e);
const { dataid, datatype } = e;
let data = {
dataid,
datatype
}
this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data) })
datatype,
};
this.props.history.push({ pathname: '/kinase/SearchDetails', search: qs.stringify(data) });
}
getOne2 (e) {
console.log(e)
const { dataid, datatype } = e
getOne2(e) {
console.log(e);
const { dataid, datatype } = e;
let data = {
dataid,
datatype
}
this.props.history.push({ pathname: '/home/TargetDetails', search: qs.stringify(data) })
datatype,
};
this.props.history.push({ pathname: '/kinase/TargetDetails', search: qs.stringify(data) });
}
getReferences = (e) => {
window.open(e)
}
window.open(e);
};
render () {
render() {
const columns = [
{
title: 'indicationName',
......@@ -111,13 +97,17 @@ export default class IndicationDetails extends Component {
title: 'Drug',
dataIndex: 'Drug',
key: 'Drug',
render: Drug => (
render: (Drug) => (
<span>
{
<Tag color="blue" onClick={() => { this.getOne(Drug) }} >
{(Drug.name)}
<Tag
color='blue'
onClick={() => {
this.getOne(Drug);
}}
>
{Drug.name}
</Tag>
}
</span>
),
......@@ -150,42 +140,34 @@ export default class IndicationDetails extends Component {
{
title: 'References',
dataIndex: 'References',
render: References => (
render: (References) => (
<span>
{References.map(item => {
{References.map((item) => {
return (
<Tag color="blue" key={item} onClick={() => { this.getReferences(item) }} >
<Tag
color='blue'
key={item}
onClick={() => {
this.getReferences(item);
}}
>
{item.toUpperCase()}
</Tag>
)
);
})}
</span>
),
},
]
const { IndicationList, total_num } = this.state
];
const { IndicationList, total_num } = this.state;
return (
<div className='IndicationDetails-div'>
<Title>{IndicationList.name}</Title>
<Table
bordered
rowKey='item'
dataSource={IndicationList}
pagination={false}
columns={columns}
/>
<Table bordered rowKey='item' dataSource={IndicationList} pagination={false} columns={columns} />
<div className='bottom-div'>
<Pagination
showSizeChanger
onShowSizeChange={this.onShowSizeChange}
onChange={this.onChange}
total={total_num}
/>
<Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange} total={total_num} />
</div>
</div>
)
);
}
}
src/routes/Kinase/TargetDetails/index.js
......@@ -1144,7 +1144,7 @@ export default class TargetDetails extends Component {
<Link href='#Sequence' title='Sequence' />
<Link href='#Structure' title='Structure' />
<Link href='#Mutation' title='Mutation' />
<Link href='#Drug' title='Drug & Clinical imformation' />
<Link href='#Drug' title='Drug & Clinical information' />
<Link href='#Bioassay' title='Bioassay' />
</Anchor>
</div>
......@@ -1261,9 +1261,13 @@ export default class TargetDetails extends Component {
{/* {PanelList} */}
<Collapse defaultActiveKey={['1', '2', '3', '4', '5', '6']} onChange={this.callback}>
<Panel header='Sequence' key='1' id='Sequence'>
<Button type='primary' onClick={this.alignmentEve}>
alignment
</Button>
<div>
<Button type='primary' onClick={this.alignmentEve}>
alignment
</Button>
<div style={{ width: '90%', overflow: 'scroll' }}>{targetsDetail.SequenceStr}</div>
</div>
<div className='Sequence-div'>
{targetsDetail.Sequence &&
targetsDetail.Sequence.map((item, index) => {
......@@ -1451,7 +1455,7 @@ export default class TargetDetails extends Component {
<Table bordered rowKey='item' dataSource={targetsDetail.MutationList} pagination={false} columns={columnsMutation} onChange={this.onChangeTable} />
<Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange} total={total_num} />
</Panel>
<Panel header='Drug & Clinical imformation' key='4' id='Drug'>
<Panel header='Drug & Clinical information' key='4' id='Drug'>
<Table bordered rowKey='item' dataSource={targetsDetail.DrugsInformation} pagination={false} expandedRowRender={expandedRowRender} columns={columnsDrug} />
<Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange3} onChange={this.onChange3} total={total_num3} />
</Panel>
......
src/routes/drugbank/TargetDetails/index.js
......@@ -777,7 +777,7 @@ export default class TargetDetails extends Component {
})}
</Tabs>
</Panel>
<Panel header="Drug&Clinical imformation" key="6">
<Panel header="Drug&Clinical information" key="6">
<Table
bordered
rowKey="item"
......
src/routes/drugbank/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',
drugs_data:'',
target_data:'',
indication :'',
pdb_status:0,
page: 1,
page_size: 10
searchData: {
name: 'Drug',
drugs_data: '',
target_data: '',
indication: '',
pdb_status: 0,
page: 1,
page_size: 10,
},
TargetSearchData:{
name:'Target',
target_data:'',
pdb_status:0,
TargetSearchData: {
name: 'Target',
target_data: '',
pdb_status: 0,
page: 1,
page_size: 10
},
ligandSearchData:{
name:'Ligand',
ligand_data:'',
target_class :'All Groups',
target_data:'',
target_families:'' ,
pdb_status:0,
page: 1,
page_size: 10
},
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{
page_size: 10,
},
ligandSearchData: {
name: 'Ligand',
ligand_data: '',
target_class: 'All Groups',
target_data: '',
target_families: '',
pdb_status: 0,
page: 1,
page_size: 10,
},
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);
}
})
.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
this.setState(()=>({loading:true }))
request.post('/drugbank/indication_search', qs.stringify(data) )
.then(res => {
this.setState(()=>({loading:false }))
if (res.data.code===200) {
this.props.history.push({ pathname: '/drugbank/Indication', 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);
})
}
// 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 }))
}
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 }))
};
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
}
childClassChange2=(e)=>{
console.log(e);
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.target_families=e
this.setState(()=>({ligandSearchData:ligandSearchData }))
getIndicationValue = (e) => {
const { value } = e.target;
let IndicationSearchData = this.state.IndicationSearchData;
IndicationSearchData.indication = value;
this.setState(() => ({ IndicationSearchData: IndicationSearchData }));
};
getIndicationList = () => {
let data = this.state.IndicationSearchData;
this.setState(() => ({ loading: true }));
request
.post('/drugbank/indication_search', qs.stringify(data))
.then((res) => {
this.setState(() => ({ loading: false }));
if (res.data.code === 200) {
this.props.history.push({ pathname: '/drugbank/Indication', search: qs.stringify(data) });
} else {
message.error(res.data.msg);
}
})
.catch((err) => {
console.error(err);
});
};
}
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_class=e
this.setState(()=>({TargetSearchData:TargetSearchData }))
let value =this.state.TargetClassList
value.map((item)=>{
if (item.name===e) {
this.setState(()=>({TargetChildClassList:item.content}))
}
// ligend
getLigendValue = (e) => {
const { value } = e.target;
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.ligand_data = value;
this.setState(() => ({ ligandSearchData: ligandSearchData }));
};
})
// let childData=value[e]
// console.log(childData);
// this.setState(()=>({childClassList:childData}))
}
childTargetClassChange=(e)=>{
console.log(e);
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.target_families=e
this.setState(()=>({TargetSearchData:TargetSearchData }))
logSmiles2 = (e) => {
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.ligand_data = e;
this.setState(() => ({ ligandSearchData: ligandSearchData }));
// this.setState(()=>({data:e }))
};
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_class = e;
this.setState(() => ({ TargetSearchData: TargetSearchData }));
let value = this.state.TargetClassList;
value.map((item) => {
if (item.name === e) {
this.setState(() => ({ TargetChildClassList: item.content }));
}
});
}
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}))
};
childTargetClassChange = (e) => {
console.log(e);
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.target_families = 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;
}
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
this.setState(()=>({loading:true }))
request.post('/drugbank/target_search', qs.stringify(data) )
.then(res => {
console.log(res)
this.setState(()=>({loading:false }))
if (res.data.code===200) {
this.props.history.push({ pathname: '/drugbank/SearchList', search: qs.stringify(data)})
}else{
message.error(res.data.msg);
}
})
.catch(err => {
console.error(err);
})
}
this.setState(() => ({ loading: true }));
request
.post('/drugbank/target_search', qs.stringify(data))
.then((res) => {
console.log(res);
this.setState(() => ({ loading: false }));
if (res.data.code === 200) {
this.props.history.push({ pathname: '/drugbank/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)=>{
onChangeCheckbox = (e) => {
console.log(e);
this.setState(()=>({select_db:e }))
if (e!='Ligands') {
this.setState(()=>({data:'' }))
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: '' }));
}
}
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.getSelectList();
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
})
console.log(this.state );
}else{
message.error(res.data.msg);
}
})
.catch(err => {
console.error(err);
})
getSelectList = () => {
request
.get('/kinase/target_class/drug')
.then((res) => {
console.log(res);
if (res.data.code === 200) {
console.log(res.data.data);
}
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
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 = () => {
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);
})
}
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 }));
};
onChangeRadio = (e) => {
console.log(e.target.value);
let value=e.target.value
let value = e.target.value;
let searchData = this.state.searchData;
searchData.pdb_status=value
searchData.pdb_status = value;
this.setState({
searchData: searchData,
});
}
onChangeRadio2=(e)=>{
let value=e.target.value
};
onChangeRadio2 = (e) => {
let value = e.target.value;
let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.pdb_status=value
TargetSearchData.pdb_status = value;
this.setState({
TargetSearchData: TargetSearchData,
});
}
onChangeRadio3=(e)=>{
let value=e.target.value
};
onChangeRadio3 = (e) => {
let value = e.target.value;
let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.pdb_status=value
ligandSearchData.pdb_status = 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
this.setState(()=>({loading:true }))
request.post('/drugbank/drug_search', qs.stringify(data) )
.then(res => {
console.log(res)
this.setState(()=>({loading:false }))
if (res.data.code===200) {
this.props.history.push({ pathname: '/drugbank/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)=>{
};
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;
this.setState(() => ({ loading: true }));
request
.post('/drugbank/drug_search', qs.stringify(data))
.then((res) => {
console.log(res);
this.setState(() => ({ loading: false }));
if (res.data.code === 200) {
this.props.history.push({ pathname: '/drugbank/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);
}
};
// getTargetList=()=>{
// this.props.history.push({ pathname: '/home/TargetDetails'})
// }
......@@ -525,14 +479,12 @@ onChangeCheckbox=(e)=>{
// this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data)})
// }
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 },
......@@ -545,13 +497,13 @@ 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'>
<div>
<Form layout="horizontal">
<Form.Item label="直接查询药物" {...formItemLayout} >
{/* <Select value={this.state.searchData.drugs_type} style={{ width: 250 }} size="large" onChange={this.compoundChange}>
<Tabs onChange={this.callback} type='card'>
<TabPane tab='Drug' key='Drug'>
<div className='top-div'>
<div>
<Form layout='horizontal'>
<Form.Item label='直接查询药物' {...formItemLayout}>
{/* <Select value={this.state.searchData.drugs_type} style={{ width: 250 }} size="large" onChange={this.compoundChange}>
{
compoundList.map(
(item,index)=>{
......@@ -563,50 +515,51 @@ onChangeCheckbox=(e)=>{
)
}
</Select> */}
<Input placeholder="请输入药物名称、Smiles" 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} >画结构</Button>
<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}>
<Radio value={0}>不筛选</Radio>
<Radio value={2}>筛选有PDB的药物</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label="利用target查询化合物" {...formItemLayout} >
<Input placeholder="请输入target name、uniprot id" style={{ width: 250 }} size="large" onChange={this.getTargetData} value={this.state.searchData.target_data} />
</Form.Item>
<Form.Item label="利用Indication查询药物" {...formItemLayout}>
<Input placeholder="请输入indication" style={{ width: 250 }} size="large" onChange={this.getindication} value={this.state.searchData.indication} />
<Button type="primary" style={{ marginLeft: 50 ,width: 150 }} size='large' loading={this.state.loading} onClick={this.getDrugsList}>Search</Button>
</Form.Item>
<Form.Item label="Tips" {...formTailLayout2}>
<div className='Tips-div'>
<Input placeholder='请输入药物名称、Smiles' 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}>
画结构
</Button>
<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}>
<Radio value={0}>不筛选</Radio>
<Radio value={2}>筛选有PDB的药物</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label='利用target查询化合物' {...formItemLayout}>
<Input placeholder='请输入target name、uniprot id' style={{ width: 250 }} size='large' onChange={this.getTargetData} value={this.state.searchData.target_data} />
</Form.Item>
<Form.Item label='利用Indication查询药物' {...formItemLayout}>
<Input placeholder='请输入indication' style={{ width: 250 }} size='large' onChange={this.getindication} value={this.state.searchData.indication} />
<Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getDrugsList}>
Search
</Button>
</Form.Item>
<Form.Item label='Tips' {...formTailLayout2}>
<div className='Tips-div'>
<div>1.本页面提供包含上市药物和进入临床实验的药物相关数据检索功能。</div>
<div>2.您可以直接检索药物名称，精准搜索您所需要的药物。您也可以试着画出您希望查询的分子片段，以检索包含这些片段的药物分子。</div>
<div>3.您也可以通过药物作用的靶点模糊搜索药物，选择您感兴趣的单个靶点或者一类靶点，查看相关药物分子。</div>
<div>4.如果您对药物分子与蛋白结晶结构的作用感兴趣，也可以勾选“筛选有PDB的药物”选项，检索符合要求的药物分子。</div>
<div>5.使用药物的适应症作为检索关键词，可以检索出与病症相关的药物分子。</div>
</div>
</Form.Item>
</Form>
</div>
</div>
</TabPane>
<TabPane tab="Target" key="Target">
<div className='top-div'>
<div>
<Form layout="horizontal">
<Form.Item label="直接查询target" {...formItemLayout}>
{/* <Select value={this.state.TargetSearchData.target_type} style={{ width: 250 }} size="large" onChange={this.targetChange}>
</Form.Item>
</Form>
</div>
</div>
</TabPane>
<TabPane tab='Target' key='Target'>
<div className='top-div'>
<div>
<Form layout='horizontal'>
<Form.Item label='直接查询target' {...formItemLayout}>
{/* <Select value={this.state.TargetSearchData.target_type} style={{ width: 250 }} size="large" onChange={this.targetChange}>
{
targetList.map(
(item,index)=>{
......@@ -618,53 +571,49 @@ onChangeCheckbox=(e)=>{
)
}
</Select> */}
<Input placeholder="请输入target name、uniprot id" style={{ width: 250 }} size="large" onChange={this.getTargetData2} value={this.state.TargetSearchData.target_data} />
</Form.Item>
<Form.Item label="通过PDB筛选target" {...formItemLayout} >
<Radio.Group onChange={this.onChangeRadio2} value={this.state.TargetSearchData.pdb_status}>
<Radio value={0}>不筛选</Radio>
<Radio value={2}>筛选有PDB的target</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label="" {...formTailLayout2}>
<Button type="primary" style={{ marginLeft: 50 ,width: 150 }} size='large' loading={this.state.loading} onClick={this.getTargetList}>Search</Button>
</Form.Item>
<Form.Item label="Tips" {...formTailLayout2}>
<Input placeholder='请输入target name、uniprot id' style={{ width: 250 }} size='large' onChange={this.getTargetData2} value={this.state.TargetSearchData.target_data} />
</Form.Item>
<Form.Item label='通过PDB筛选target' {...formItemLayout}>
<Radio.Group onChange={this.onChangeRadio2} value={this.state.TargetSearchData.pdb_status}>
<Radio value={0}>不筛选</Radio>
<Radio value={2}>筛选有PDB的target</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label='' {...formTailLayout2}>
<Button type='primary' style={{ marginLeft: 50, 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. 本页面提供有药物关系的靶点数据检索功能。</div>
<div>2. 您可以直接检索靶点Uniprot名称或者ID，精准搜索您所需要的靶点。</div>
<div>3. 如果您对靶点的结晶结构感兴趣，也可以勾选“筛选有PDB的target”选项，检索有结晶结构的靶点。</div>
<div>1. 本页面提供有药物关系的靶点数据检索功能。</div>
<div>2. 您可以直接检索靶点Uniprot名称或者ID，精准搜索您所需要的靶点。</div>
<div>3. 如果您对靶点的结晶结构感兴趣，也可以勾选“筛选有PDB的target”选项，检索有结晶结构的靶点。</div>
</div>
</Form.Item>
</Form>
</div>
</div>
</TabPane>
<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}>Search</Button>
</Form.Item>
</Form>
</div>
</div>
</TabPane>
</Tabs>
</Form.Item>
</Form>
</div>
</div>
</TabPane>
<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}>
Search
</Button>
</Form.Item>
</Form>
</div>
</div>
</TabPane>
</Tabs>
</div>
</div>
)
);
}
}
export default Home
\ No newline at end of file
export default Home;
src/utils/request.js
......@@ -17,13 +17,54 @@ function disableF12() {
}
// disableF12();
//对axios二次封装
const token = getQueryString('token');
function checkFetchToken() {
fetch('http://69.235.144.91:8048/yszh-login/auth/checkToken', {
method: 'GET',
headers: {
accessToken: token,
},
})
.then((res) => res.json())
.then((res) => {
console.log('fetch--res', res);
if (res.code === 200) {
//校验通过,存储token
token && localStorage.setItem('token', token);
} else {
alert('token校验失败,返回登录页');
// window.open('http://localhost:3000/#/login', '_self');
window.open('http://69.235.144.91:3048/#/login', '_self');
}
})
.catch(function(err) {
console.log('err', err);
window.open('http://69.235.144.91:3048/#/login', '_self');
});
// 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 {
// console.log('token校验没通过 返回登录页');
// window.open('http://69.235.144.91:3048/#/login', '_self');
// }
// })
// .catch((err) => {
// console.log('token校验没通过 返回登录页');
// window.open('http://69.235.144.91:3048/#/login', '_self');
// console.log('err', err);
// });
}
checkFetchToken();
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,
......@@ -34,44 +75,16 @@ const request = axios.create({
},
});
function checkToken(config) {
// 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(' 失败');
console.log('token校验没通过 返回登录页');
// window.open('http://localhost:3000/#/login', '_self');
window.open('http://69.235.144.91:3048/#/login', '_self');
}
})
.catch((err) => {
localStorage.removeItem('token');
// alert(' 服务器报错');
console.log('token校验没通过 返回登录页');
window.open('http://69.235.144.91:3048/#/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);
if (localStorage.getItem('token')) {
config.headers['accessToken'] = localStorage.getItem('token');
return config;
} else {
console.log('token为空....');
localStorage.removeItem('token');
window.open('http://69.235.144.91:3048/#/login', '_self');
}
});
......
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