Skip to content

E
elegantDeepKinase
Commit 3a8b772b by wangshufen
Options

feature:kiniase功能优化修改

parent e08523de
Showing with 765 additions and 828 deletions
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 Molstar from "molstar-react";
import { Jsme } from 'jsme-react'
import qs from 'qs'
import './index.css'
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 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 { Title } = Typography;
export default class TargetDetails extends Component {
state = {
name:'',
Structure:[],
dataOne:qs.parse(this.props.location.search.slice(1)),
visible:false,
pdbId:'6f6s',
DetailsData:{
PubChemCID:5462310,
MolecularWeight:12.011,
smiles:'cccc'
},
panelList:{
Bioassay:[]
state = {
name: '',
Structure: [],
dataOne: qs.parse(this.props.location.search.slice(1)),
visible: false,
pdbId: '6f6s',
DetailsData: {
PubChemCID: 5462310,
MolecularWeight: 12.011,
smiles: 'cccc',
},
panelList: {
Bioassay: [],
},
statusMutation: 0,
OLDMutationList: [],
},
statusMutation:0,
OLDMutationList:[],
targetsDetail:{
Structure:[],
Sequence:[]
},
loading:true,
getStructureList:{
ligand_up_list:[],
ligand_list:[],
chain:[],
References:[]
},
listData:{
pdb_code: '',
ligand: '',
resolution: 0
},
fileData:{
filestring:'',
type:'pdb'
}
};
componentDidMount(){
this.getDetails()
}
getDetails(){
// this.setState({loading:true})
this.setState({loading:true})
request.post('/targets_detail', this.props.location.search.slice(1) )
.then(res => {
this.setState({loading:false})
if (res.data.code===200) {
targetsDetail: {
Structure: [],
Sequence: [],
},
loading: true,
getStructureList: {
ligand_up_list: [],
ligand_list: [],
chain: [],
References: [],
},
listData: {
pdb_code: '',
ligand: '',
resolution: 0,
},
fileData: {
filestring: '',
type: 'pdb',
},
};
componentDidMount() {
this.getDetails();
}
getDetails() {
// this.setState({loading:true})
this.setState({ loading: true });
request
.post('/targets_detail', this.props.location.search.slice(1))
.then((res) => {
this.setState({ loading: false });
if (res.data.code === 200) {
console.log(res);
let data=res.data.data
this.setState({targetsDetail:data})
this.setState({OLDMutationList:data.Mutation})
this.setState({loading:false})
let StructureList=res.data.data.Structure
if (StructureList.length>0) {
this.getStructure(StructureList[0].pdb)
let data = res.data.data;
this.setState({ targetsDetail: data });
this.setState({ OLDMutationList: data.Mutation });
this.setState({ loading: false });
let StructureList = res.data.data.Structure;
if (StructureList.length > 0) {
this.getStructure(StructureList[0].pdb);
}
}else{
} else {
message.error(res.data.msg);
}
})
.catch(err => {
console.error(err);
})
}
getPdid(e){
console.log(e);
this.setState({visible: true})
this.setState({pdbId: e})
}
getTag=(e)=>{
console.log(e);
this.setState({visible: true})
this.setState({pdbId: e})
}
getReferences=(e)=>{
window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`)
.catch((err) => {
console.error(err);
});
}
onChangeRadio=(e)=>{
let OLDMutationList= this.state.targetsDetail.Mutation
getPdid(e) {
console.log(e);
this.setState({ visible: true });
this.setState({ pdbId: e });
}
getTag = (e) => {
console.log(e);
this.setState({ visible: true });
this.setState({ pdbId: e });
};
getReferences = (e) => {
window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`);
};
onChangeRadio = (e) => {
let OLDMutationList = this.state.targetsDetail.Mutation;
this.setState({
OLDMutationList:OLDMutationList
})
let value=e.target.value
OLDMutationList: OLDMutationList,
});
let value = e.target.value;
this.setState({
statusMutation:value
})
if (value===0) {
OLDMutationList=this.state.targetsDetail.Mutation
this.setState({
OLDMutationList:OLDMutationList
})
}
if (value===1) {
let MutationList1= OLDMutationList.filter((item)=>{
return item.status===1
})
this.setState({
OLDMutationList:MutationList1
})
statusMutation: value,
});
if (value === 0) {
OLDMutationList = this.state.targetsDetail.Mutation;
this.setState({
OLDMutationList: OLDMutationList,
});
}
if (value===2) {
let MutationList2= OLDMutationList.filter((item)=>{
return item.status===2
})
if (value === 1) {
let MutationList1 = OLDMutationList.filter((item) => {
return item.status === 1;
});
this.setState({
OLDMutationList:MutationList2
})
this.setState({
OLDMutationList: MutationList1,
});
}
if (value === 2) {
let MutationList2 = OLDMutationList.filter((item) => {
return item.status === 2;
});
}
getDrug=(e)=>{
console.log(e);
let data={
dataid:e
}
this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data)})
}
callback(){
this.setState({
OLDMutationList: MutationList2,
});
}
childTargetClassChange=()=>{
};
getDrug = (e) => {
console.log(e);
let data = {
dataid: e,
};
this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data) });
};
}
getStructure=(e)=>{
request.post('/search_pdb_data', qs.stringify({
pdb:e
}) )
.then(res => {
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
this.setState({listData})
}else{
callback() {}
childTargetClassChange = () => {};
getStructure = (e) => {
request
.post(
'/search_pdb_data',
qs.stringify({
pdb: e,
})
)
.then((res) => {
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;
this.setState({ listData });
} else {
message.error(res.data.msg);
}
})
.catch(err => {
console.error(err);
})
.catch((err) => {
console.error(err);
});
};
ChangeTabs = (e) => {
let listData = this.state.listData;
listData.ligand = '';
this.setState({
listData: listData,
});
this.getStructure(e);
};
getList = () => {
let fileData = this.state.fileData;
fileData.filestring = '';
this.setState({
fileData: fileData,
});
}
ChangeTabs=(e)=>{
let listData=this.state.listData
listData.ligand=''
this.setState({
listData:listData
})
this.getStructure(e)
}
getList=()=>{
let fileData=this.state.fileData
fileData.filestring=''
this.setState({
fileData:fileData
})
// if (this.state.listData.ligand==='') {
// message.warning('输入查询条件');
// return
// }
// if (this.state.getStructureList.resolution>this.state.listData.resolution) {
// message.warning('搜索半径不能小于resolution');
// return
// }
request
.post('/search_pdb_ligand_resolution', qs.stringify(this.state.listData))
.then((res) => {
let fileData = JSON.parse(JSON.stringify(this.state.fileData));
fileData.filestring = res.data;
this.setState({
fileData: fileData,
});
// if (this.state.listData.ligand==='') {
// message.warning('输入查询条件');
// return
// }
// if (this.state.getStructureList.resolution>this.state.listData.resolution) {
// message.warning('搜索半径不能小于resolution');
// return
// }
request.post('/search_pdb_ligand_resolution', qs.stringify(this.state.listData) )
.then(res => {
let fileData = JSON.parse(JSON.stringify(this.state.fileData) )
fileData.filestring=res.data
this.setState({
fileData:fileData
})
this.setState({
visible:true
})
this.setState({loading:false})
visible: true,
});
this.setState({ loading: false });
console.log(this.state.fileData);
})
.catch(err => {
console.error(err);
})
}
getResolutionData=(e)=>{
console.log(e);
let listData=this.state.listData
listData.resolution=e
this.setState({
listData
})
}
LigandChange=(e)=>{
let listData=this.state.listData
listData.ligand=e
this.setState({
listData
})
}
.catch((err) => {
console.error(err);
});
};
getResolutionData = (e) => {
console.log(e);
let listData = this.state.listData;
listData.resolution = e;
this.setState({
listData,
});
};
LigandChange = (e) => {
let listData = this.state.listData;
listData.ligand = e;
this.setState({
listData,
});
};
render() {
const {visible,panelList,Structure,OLDMutationList, name,pdbId,targetsDetail,getStructureList}=this.state
const columnsDrug = [
{
title: 'Drug Structure',
dataIndex: 'Drug Structure',
key: 'Drug Structure',
render: DrugStructure => (
<Jsme height="100px" width="100px" options="depict,useopenchemlib" smiles={DrugStructure} />
),
},
{
title: 'Drug name',
dataIndex: 'Drug name',
key: 'Drug name',
render: (item,record) => (
<Button type="primary" onClick={()=>this.getDrug(record.Drug_dataid)}>{item}</Button>
),
},
{
title: 'Drug Type',
dataIndex: 'Drug type',
key: 'Drug type',
},
{
title: 'Indication',
dataIndex: 'Indication',
key: 'Indication',
},
{
const { visible, panelList, Structure, OLDMutationList, name, pdbId, targetsDetail, getStructureList } = this.state;
const columnsDrug = [
{
title: 'Drug Structure',
dataIndex: 'Drug Structure',
key: 'Drug Structure',
render: (DrugStructure) => <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={DrugStructure} />,
},
{
title: 'Drug name',
dataIndex: 'Drug name',
key: 'Drug name',
render: (item, record) => (
<Button type='primary' onClick={() => this.getDrug(record.Drug_dataid)}>
{item}
</Button>
),
},
{
title: 'Drug Type',
dataIndex: 'Drug type',
key: 'Drug type',
},
{
title: 'Indication',
dataIndex: 'Indication',
key: 'Indication',
},
{
title: 'Mechanism of Action',
dataIndex: 'Mechanism of Action',
key: 'Mechanism of Action',
......@@ -288,122 +272,132 @@ export default class TargetDetails extends Component {
dataIndex: 'Year of Approval',
key: 'Year of Approval',
},
{
{
title: 'References',
dataIndex: 'References',
key: 'References',
render: References => (
<span>
{References.map(item => {
return (
<Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} >
{item.toUpperCase()}
</Tag>
);
})}
</span>
),
},
];
const columnsBioassay = [
{
title: 'Structure',
dataIndex: 'smile',
key: 'smile',
render: smile => (
<Jsme height="100px" width="100px" options="depict,useopenchemlib" smiles={smile} />
),
},
{
title: 'Compound name',
dataIndex: 'Compound name',
key: 'Compound name',
},
{
title: 'Type',
dataIndex: 'Type',
key: 'Type',
},
{
title: 'Action',
dataIndex: 'Action',
key: 'Action',
},
{
title: 'Parameter',
dataIndex: 'Parameter',
key: 'Parameter',
},
{
title: 'Value',
dataIndex: 'Value',
key: 'Value',
},
{
title: 'References',
dataIndex: 'References',
key: 'References',
render: References => (
<span>
{References.map(item => {
return (
<Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} >
{item.toUpperCase()}
</Tag>
);
})}
</span>
),
},
];
const formItemLayout ={
labelCol: { span: 8 },
wrapperCol: { span: 12 },
}
render: (References) => (
<span>
{References.map((item) => {
return (
<Tag
color='blue'
key={item}
onClick={() => {
this.getReferences(item);
}}
>
{item.toUpperCase()}
</Tag>
);
})}
</span>
),
},
];
const columnsBioassay = [
{
title: 'Structure',
dataIndex: 'smile',
key: 'smile',
render: (smile) => <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={smile} />,
},
{
title: 'Compound name',
dataIndex: 'Compound name',
key: 'Compound name',
},
{
title: 'Type',
dataIndex: 'Type',
key: 'Type',
},
{
title: 'Action',
dataIndex: 'Action',
key: 'Action',
},
{
title: 'Parameter',
dataIndex: 'Parameter',
key: 'Parameter',
},
{
title: 'Value',
dataIndex: 'Value',
key: 'Value',
},
{
title: 'References',
dataIndex: 'References',
key: 'References',
render: (References) => (
<span>
{References.map((item) => {
return (
<Tag
color='blue'
key={item}
onClick={() => {
this.getReferences(item);
}}
>
{item.toUpperCase()}
</Tag>
);
})}
</span>
),
},
];
const formItemLayout = {
labelCol: { span: 8 },
wrapperCol: { span: 12 },
};
const columnsMutation = [
{
title: 'Generic number',
dataIndex: 'Generic',
key: 'Generic',
},
{
title: 'Position',
dataIndex: 'Position',
key: 'Position',
},
{
title: 'Segment',
dataIndex: 'Segment',
key: 'Segment',
},
{
title: 'Mutation',
dataIndex: 'Mutation',
key: 'Mutation',
},
{
title: 'Ligand',
dataIndex: 'Ligand',
key: 'Ligand',
render: Ligand => (
<Popover content={ <div>
<Jsme height="100px" width="100px" options="depict,useopenchemlib" smiles={Ligand.smile} />
</div>}>
{Ligand.name!=''&&(<Button type="primary">{Ligand.name}</Button>)}
</Popover>
),
},
{
title: 'Activity type',
dataIndex: 'Activity type',
key: 'Activity type',
},
{
const columnsMutation = [
{
title: 'Generic number',
dataIndex: 'Generic',
key: 'Generic',
},
{
title: 'Position',
dataIndex: 'Position',
key: 'Position',
},
{
title: 'Segment',
dataIndex: 'Segment',
key: 'Segment',
},
{
title: 'Mutation',
dataIndex: 'Mutation',
key: 'Mutation',
},
{
title: 'Ligand',
dataIndex: 'Ligand',
key: 'Ligand',
render: (Ligand) => (
<Popover
content={
<div>
<Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={Ligand.smile} />
</div>
}
>
{Ligand.name != '' && <Button type='primary'>{Ligand.name}</Button>}
</Popover>
),
},
{
title: 'Activity type',
dataIndex: 'Activity type',
key: 'Activity type',
},
{
title: 'Activity value',
dataIndex: 'Activity value',
key: 'Activity value',
......@@ -413,300 +407,260 @@ export default class TargetDetails extends Component {
dataIndex: 'Foldchange',
key: 'Foldchange',
defaultSortOrder: 'descend',
sorter: (a, b) => a.Foldchange-b.Foldchange
},
// {
// title: 'Year of approval',
// dataIndex: 'Year of approval',
// key: 'Year of approval',
// },
{
title: 'Reference',
dataIndex: 'Reference',
render: Reference => (
<span>
{Reference.map(item => {
return (
<Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} >
{item.toUpperCase()}
</Tag>
);
})}
</span>
),
},
];
const columnsChain=[
{
title: 'Chain_name',
dataIndex: 'Chain_name',
key: 'Chain_name',
},
{
title: 'Chain_ID',
dataIndex: 'Chain_ID',
key: 'Chain_ID',
},
{
title: 'code',
dataIndex: 'code',
key: 'code',
},
{
title: 'code_type',
dataIndex: 'code_type',
key: 'code_type',
},
{
title: 'res_start',
dataIndex: 'res_start',
key: 'res_start',
},
{
title: 'res_end',
dataIndex: 'res_end',
key: 'res_end',
},
]
sorter: (a, b) => a.Foldchange - b.Foldchange,
},
// {
// title: 'Year of approval',
// dataIndex: 'Year of approval',
// key: 'Year of approval',
// },
{
title: 'Reference',
dataIndex: 'Reference',
render: (Reference) => (
<span>
{Reference.map((item) => {
return (
<Tag
color='blue'
key={item}
onClick={() => {
this.getReferences(item);
}}
>
{item.toUpperCase()}
</Tag>
);
})}
</span>
),
},
];
const columnsChain = [
{
title: 'Chain_name',
dataIndex: 'Chain_name',
key: 'Chain_name',
},
{
title: 'Chain_ID',
dataIndex: 'Chain_ID',
key: 'Chain_ID',
},
{
title: 'code',
dataIndex: 'code',
key: 'code',
},
{
title: 'code_type',
dataIndex: 'code_type',
key: 'code_type',
},
{
title: 'res_start',
dataIndex: 'res_start',
key: 'res_start',
},
{
title: 'res_end',
dataIndex: 'res_end',
key: 'res_end',
},
];
return (
<div className='search-details-div'>
<Modal
footer={null} closable={false}
width={550}
visible={visible}
wrapClassName="vertical-center-modal"
onCancel={() => this.setState({visible: false})}>
<div className='Molstar-div'>
<Molstar file={this.state.fileData} />
</div>
</Modal>
<Spin tip="Loading..." size='large' spinning={this.state.loading}>
<Card hoverable>
<div >
<div className='title-div'>
{targetsDetail.name}
</div>
<div className='title-div-top'>
<div className='DataList-left'>
<div >
<div className='div-list'>
<div className='list-one'>
<div>Gene name</div>
<div >
</div>
{targetsDetail['Gene name']}
</div>
<div className='list-one'>
<div>Species</div>
<div >
</div>
{targetsDetail.Species}
</div>
<div className='list-one'>
<div>Uniprot id</div>
<div >
</div>
{targetsDetail['Uniport id']}
</div>
<div className='list-one'>
<div>Class</div>
<div >
</div>
{targetsDetail.Class}
</div>
<div className='list-one'>
<div>Family</div>
<div >
</div>
{targetsDetail.Family}
</div>
<Modal footer={null} closable={false} width={550} visible={visible} wrapClassName='vertical-center-modal' onCancel={() => this.setState({ visible: false })}>
<div className='Molstar-div'>
<Molstar file={this.state.fileData} />
</div>
</Modal>
<Spin tip='Loading...' size='large' spinning={this.state.loading}>
<Card hoverable>
<div>
<div className='title-div'>{targetsDetail.name}</div>
<div className='title-div-top'>
<div className='DataList-left'>
<div>
<div className='div-list'>
<div className='list-one'>
<div>Gene name</div>
<div />
{targetsDetail['Gene name']}
</div>
<div className='list-one'>
<div>Species</div>
<div />
{targetsDetail.Species}
</div>
<div className='list-one'>
<div>Uniprot id</div>
<div />
{targetsDetail['Uniport id']}
</div>
<div className='list-one'>
<div>Class</div>
<div />
{targetsDetail.Class}
</div>
<div className='list-one'>
<div>Family</div>
<div />
{targetsDetail.Family}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Card>
{/* {PanelList} */}
<Collapse defaultActiveKey={['1', '2', '3', '4', '5']} onChange={this.callback}>
<Panel header='Sequence' key='1'>
<div className='Sequence-div'>
{targetsDetail.Sequence.map((item, index) => {
// console.log(item);
// console.log(Object.entries(item));
return (
<div className='Sequenceone-div' key={index}>
{Object.entries(item)[0][0]}
<div className='zimu-div'>
{Object.entries(item)[0][1].map((item2, index2) => {
console.log(item2);
return (
<Tooltip placement='top' key={index2} title={item2.title}>
<div className={'res-color-' + item2.thum}>{item2.thum}</div>
</Tooltip>
);
})}
</div>
</div>
</Card>
{/* {PanelList} */}
<Collapse defaultActiveKey={['1','2','3','4','5']} onChange={this.callback}>
<Panel header="Sequence" key="1">
<div className='Sequence-div'>
{targetsDetail.Sequence.map((item,index)=>{
// console.log(item);
// console.log(Object.entries(item));
return(
<div className='Sequenceone-div' key={index}>
{Object.entries(item)[0][0]}
<div className='zimu-div'>
{Object.entries(item)[0][1].map((item2,index2)=>{
console.log(item2);
return(
<Tooltip placement="top" key={index2} title={item2.title}>
<div className={'res-color-'+item2.thum}>
{item2.thum}
</div>
</Tooltip>
)
})}
</div>
</div>
)
})
}
</div>
</Panel>
<Panel header="Structure" key="2">
<Tabs defaultActiveKey="0" type="card" tabPosition='left' onChange={this.ChangeTabs}>
{
targetsDetail.Structure.map((item,index)=>{
return(
);
})}
</div>
</Panel>
<Panel header='Structure' key='2'>
<Tabs defaultActiveKey='0' type='card' tabPosition='left' onChange={this.ChangeTabs}>
{targetsDetail.Structure.map((item, index) => {
return (
<TabPane tab={item.pdb} key={item.pdb}>
<div className='TabPane-center'>
<div className='Molstar-div2'>
<Molstar pdbId={item.pdb} />
</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>
</Form.Item>
<Form.Item label='配体列表' {...formItemLayout}>
{getStructureList.ligand_up_list &&
getStructureList.ligand_up_list.map((item, index) => {
return (
<Popover
content={
<div>
<div style={{ width: '100px', wordWrap: 'break-word', wordBreak: 'normal' }}>{item.comp_name}</div>
<TabPane tab={(item.pdb)} key={item.pdb}>
<div className='TabPane-center'>
<div className='Molstar-div2'>
<Molstar pdbId={item.pdb} />
</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>
</Form.Item>
<Form.Item label="配体列表" {...formItemLayout} >
{
getStructureList.ligand_up_list&& getStructureList.ligand_up_list.map((item,index)=>{
return(
<Popover content={ <div>
<div style={{width:'100px', wordWrap: 'break-word', wordBreak: 'normal'}}>
{item.comp_name}
</div>
<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}>
{
getStructureList.ligand_list&& getStructureList.ligand_list.map(
(item,index)=>{
return(
<Option key={index} value={item}>{item}</Option>
)
}
)
}
</Select>
</Form.Item>
<Form.Item label="搜索半径" {...formItemLayout} >
<InputNumber style={{ width: 250 }} min={getStructureList.resolution} max={10} placeholder={'请输入大于resolutiond数字'} step={0.1} size="large" onChange={this.getResolutionData} />
</Form.Item>
<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>)
)
})
}
</Form.Item>
<Form.Item label="Search" {...formItemLayout} >
<Button type="primary" style={{ marginLeft: 50 ,width: 150 }} size='large' loading={this.state.loading} disabled={getStructureList.ligand_list.length===0} onClick={this.getList}>Search</Button>
</Form.Item>
</Form>
</div>
</div>
<Table
bordered
rowKey='item'
dataSource={getStructureList.chain}
pagination={false}
columns={columnsChain}
/>
</TabPane>
)
})
}
</Tabs>
</Panel>
<Panel header="Mutation" key="3">
<div className='Radio-div'>
<Radio.Group onChange={this.onChangeRadio} value={this.state.statusMutation}>
<Radio value={0}>Full data</Radio>
<Radio value={1}>Increase only</Radio>
<Radio value={2}>Decrease only</Radio>
</Radio.Group>
<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}>
{getStructureList.ligand_list &&
getStructureList.ligand_list.map((item, index) => {
return (
<Option key={index} value={item}>
{item}
</Option>
);
})}
</Select>
</Form.Item>
<Form.Item label='搜索半径' {...formItemLayout}>
<InputNumber
style={{ width: 250 }}
min={getStructureList.resolution}
max={10}
placeholder={'请输入大于resolutiond数字'}
step={0.1}
size='large'
onChange={this.getResolutionData}
/>
</Form.Item>
<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>
);
})}
</Form.Item>
<Form.Item label='Search' {...formItemLayout}>
<Button
type='primary'
style={{ marginLeft: 50, width: 150 }}
size='large'
loading={this.state.loading}
disabled={getStructureList.ligand_list.length === 0}
onClick={this.getList}
>
Search
</Button>
</Form.Item>
</Form>
</div>
<Table
bordered
rowKey='item'
dataSource={OLDMutationList}
pagination={false}
columns={columnsMutation}
/>
</Panel>
<Panel header="Drug & Clinical information" key="4">
<Table
bordered
rowKey='item'
dataSource={targetsDetail['Drugs information']}
pagination={false}
columns={columnsDrug}
/>
</Panel>
<Panel header="Bioassay" key="5">
<Table
bordered
rowKey='item'
dataSource={targetsDetail.Bioassay}
pagination={false}
columns={columnsBioassay}
/>
</Panel>
</Collapse>
</Spin>
</div>
<Table bordered rowKey='item' dataSource={getStructureList.chain} pagination={false} columns={columnsChain} />
</TabPane>
);
})}
</Tabs>
</Panel>
<Panel header='Mutation' key='3'>
<div className='Radio-div'>
<Radio.Group onChange={this.onChangeRadio} value={this.state.statusMutation}>
<Radio value={0}>Full data</Radio>
<Radio value={1}>Increase only</Radio>
<Radio value={2}>Decrease only</Radio>
</Radio.Group>
</div>
<Table bordered rowKey='item' dataSource={OLDMutationList} pagination={false} columns={columnsMutation} />
</Panel>
<Panel header='Drug & Clinical information' key='4'>
<Table bordered rowKey='item' dataSource={targetsDetail['Drugs information']} pagination={false} columns={columnsDrug} />
</Panel>
<Panel header='Bioassay' key='5'>
<Table bordered rowKey='item' dataSource={targetsDetail.Bioassay} pagination={false} columns={columnsBioassay} />
</Panel>
</Collapse>
</Spin>
</div>
)
);
}
}
src/routes/Kinase/SearchDetails/index.js
......@@ -950,11 +950,11 @@ export default class SearchDetails extends Component {
<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'>
<Panel header='Target' id='Target' key='1'>
<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'>
<Panel header='Biological Propeties0' id='BiologicalPropeties' key='5'>
<div className='Calcilated'>
<div className='div-list'>
<div className='list-one'>
......@@ -996,11 +996,11 @@ export default class SearchDetails extends Component {
</div>
</Panel>
<Panel header='Bioassay' key='2' id='Bioassay'>
<Panel header='Bioassay' id='Bioassay' key='2'>
<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' id='CalculatedPropeties' key='3'>
<div>
<div className='Calcilated'>
<div className='list-one2'>
......@@ -1041,7 +1041,7 @@ export default class SearchDetails extends Component {
</div>
</div>
</Panel>
<Panel header='Structure' key='4' id='Structure'>
<Panel header='Structure' id='Structure' key='4'>
<Tabs
defaultActiveKey='0'
// type="card"
......
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 qs from "qs";
import "./index.css";
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 qs from 'qs';
import './index.css';
import { withRouter } from 'react-router-dom';
const { TabPane } = Tabs;
const { Panel } = Collapse;
export default class SearchList extends Component {
class SearchList extends Component {
state = {
smilesList: [],
visible: false,
pdbId: "6f6s",
pdbId: '6f6s',
total_num: 0,
smilesData: qs.parse(this.props.location.search.slice(1)),
loading: true,
......@@ -24,12 +25,12 @@ export default class SearchList extends Component {
};
this.props.history.push({
pathname: "/Kinase/TargetDetails",
pathname: '/Kinase/TargetDetails',
search: qs.stringify(data),
});
}
onShowSizeChange = (current, pageSize) => {
if (this.state.smilesData.name === "Drug") {
if (this.state.smilesData.name === 'Drug') {
let smilesData = this.state.smilesData;
smilesData.page = current;
smilesData.page_size = pageSize;
......@@ -39,7 +40,7 @@ export default class SearchList extends Component {
this.getList();
return;
}
if (this.state.smilesData.name === "Target") {
if (this.state.smilesData.name === 'Target') {
let smilesData = this.state.smilesData;
smilesData.page = current;
smilesData.page_size = pageSize;
......@@ -49,7 +50,7 @@ export default class SearchList extends Component {
this.getTargetList();
return;
}
if (this.state.smilesData.name === "Ligand") {
if (this.state.smilesData.name === 'Ligand') {
let smilesData = this.state.smilesData;
smilesData.page = current;
smilesData.page_size = pageSize;
......@@ -59,7 +60,7 @@ export default class SearchList extends Component {
this.getLigandList();
return;
}
if (this.state.smilesData.name === "Mutation") {
if (this.state.smilesData.name === 'Mutation') {
let smilesData = this.state.smilesData;
smilesData.page = current;
smilesData.page_size = pageSize;
......@@ -71,7 +72,7 @@ export default class SearchList extends Component {
}
};
onChange = (current, pageSize) => {
if (this.state.smilesData.name === "Drug") {
if (this.state.smilesData.name === 'Drug') {
let smilesData = this.state.smilesData;
smilesData.page = current;
smilesData.page_size = pageSize;
......@@ -82,7 +83,7 @@ export default class SearchList extends Component {
this.getList();
return;
}
if (this.state.smilesData.name === "Target") {
if (this.state.smilesData.name === 'Target') {
let smilesData = this.state.smilesData;
smilesData.page = current;
smilesData.page_size = pageSize;
......@@ -92,7 +93,7 @@ export default class SearchList extends Component {
this.getTargetList();
return;
}
if (this.state.smilesData.name === "Ligand") {
if (this.state.smilesData.name === 'Ligand') {
let smilesData = this.state.smilesData;
smilesData.page = current;
smilesData.page_size = pageSize;
......@@ -102,7 +103,7 @@ export default class SearchList extends Component {
this.getLigandList();
return;
}
if (this.state.smilesData.name === "Mutation") {
if (this.state.smilesData.name === 'Mutation') {
let smilesData = this.state.smilesData;
smilesData.page = current;
smilesData.page_size = pageSize;
......@@ -115,16 +116,16 @@ export default class SearchList extends Component {
};
componentDidMount() {
console.log(this.state.smilesData);
if (this.state.smilesData.name === "Drug") {
if (this.state.smilesData.name === 'Drug') {
this.getList();
}
if (this.state.smilesData.name === "Target") {
if (this.state.smilesData.name === 'Target') {
this.getTargetList();
}
if (this.state.smilesData.name === "Ligand") {
if (this.state.smilesData.name === 'Ligand') {
this.getLigandList();
}
if (this.state.smilesData.name === "Mutation") {
if (this.state.smilesData.name === 'Mutation') {
this.getMutationList();
}
}
......@@ -132,7 +133,7 @@ export default class SearchList extends Component {
console.log(qs.parse(this.props.location.search.slice(1)));
this.setState({ loading: true });
request
.post("/kinase/drug_search",this.state.smilesData)
.post('/kinase/drug_search', this.state.smilesData)
.then((res) => {
console.log(res);
if (res.data.code === 200) {
......@@ -159,7 +160,7 @@ export default class SearchList extends Component {
console.log(qs.parse(this.props.location.search.slice(1)));
this.setState({ loading: true });
request
.post("/kinase/targets_search", this.state.smilesData)
.post('/kinase/targets_search', this.state.smilesData)
.then((res) => {
console.log(res);
if (res.data.code === 200) {
......@@ -180,7 +181,7 @@ export default class SearchList extends Component {
console.log(qs.parse(this.props.location.search.slice(1)));
this.setState({ loading: true });
request
.post("/kinase/ligand_search", this.state.smilesData)
.post('/kinase/ligand_search', this.state.smilesData)
.then((res) => {
console.log(res);
if (res.data.code === 200) {
......@@ -207,7 +208,7 @@ export default class SearchList extends Component {
console.log(qs.parse(this.props.location.search.slice(1)));
this.setState({ loading: true });
request
.post("/mutation_search", qs.stringify(this.state.smilesData))
.post('/mutation_search', qs.stringify(this.state.smilesData))
.then((res) => {
console.log(res);
if (res.data.code === 200) {
......@@ -235,27 +236,27 @@ export default class SearchList extends Component {
datatype,
};
if (this.state.smilesData.name === "Drug") {
if (this.state.smilesData.name === 'Drug') {
this.props.history.push({
pathname: "/Kinase/SearchDetails",
pathname: '/Kinase/SearchDetails',
search: qs.stringify(data),
});
}
if (this.state.smilesData.name === "Target") {
if (this.state.smilesData.name === 'Target') {
this.props.history.push({
pathname: "/Kinase/TargetDetails",
pathname: '/Kinase/TargetDetails',
search: qs.stringify(data),
});
}
if (this.state.smilesData.name === "Ligand") {
if (this.state.smilesData.name === 'Ligand') {
this.props.history.push({
pathname: "/Kinase/LigandDetails",
pathname: '/Kinase/LigandDetails',
search: qs.stringify(data),
});
}
if (this.state.smilesData.name === "Mutation") {
if (this.state.smilesData.name === 'Mutation') {
this.props.history.push({
pathname: "/home/MutationDetails",
pathname: '/home/MutationDetails',
search: qs.stringify(data),
});
}
......@@ -288,149 +289,122 @@ export default class SearchList extends Component {
};
render() {
const {
smilesList,
loading,
ShowDivDataid,
total_num,
smilesData,
TargetState,
} = this.state;
const { smilesList, loading, ShowDivDataid, total_num, smilesData, TargetState } = this.state;
const listItems = smilesList.map((item, index) => {
const listItems = smilesList.map((item, index) => {
return (
<Card
loading={loading}
hoverable
extra={<a onClick={() => this.getOne(item)}>{item.name}</a>}
style={{ width: '100%', marginBottom: '20px' }}
key={index}>
<div className="list-div-one">
<div
className={
smilesData.name === 'Drug' || smilesData.name === 'Ligand'
? 'list-div-left'
: 'isShowDiv'
}>
<Jsme
height="150px"
width=""
options="depict,useopenchemlib"
smiles={item.smile}
/>
<Card loading={loading} hoverable extra={<a onClick={() => this.getOne(item)}>{item.name}</a>} style={{ width: '100%', marginBottom: '20px' }} key={index}>
<div className='list-div-one'>
<div className={smilesData.name === 'Drug' || smilesData.name === 'Ligand' ? 'list-div-left' : 'isShowDiv'}>
<Jsme height='150px' width='' options='depict,useopenchemlib' smiles={item.smile} />
</div>
<div className="list-div-right">
<div className='list-div-right'>
{Object.keys(item.info).map((item2, key2, arr) => {
if (typeof item.info[item2] === 'object') {
return (
<div className="left" key={key2}>
<div className='left' key={key2}>
{' '}
<span>{item2}</span>:
{item2 === 'Indication' &&
item.info[item2].slice(0, 5).map((item3, index3) => {
return (
<span
type="primary"
type='primary'
style={{
fontWeight: 300,
color: 'black',
}}
key={index3}>
key={index3}
>
{' '}
<Tag style={{ marginBottom: '5px' }}>{item3}</Tag>
</span>
)
);
})}
{item2 === 'Target' &&
item.info[item2].slice(0, 5).map((item3, index3) => {
return (
<Button
className={item.TargetState ? '' : 'isShowDiv'}
type="primary"
type='primary'
style={{ marginBottom: '5px', marginLeft: '5px' }}
key={index3}
onClick={() => this.getPdid(item3.dataid)}>
onClick={() => this.getPdid(item3.dataid)}
>
{item3.name}
</Button>
)
);
})}
{
item2 === 'Target' && <Button
className={
item.info[item2].length > 5 && item.TargetState
? ''
: 'isShowDiv'
}
{item2 === 'Target' && (
<Button
className={item.info[item2].length > 5 && item.TargetState ? '' : 'isShowDiv'}
style={{ marginBottom: '5px', marginLeft: '5px' }}
onClick={() => this.TargetButton(item, index)}>
onClick={() => this.TargetButton(item, index)}
>
查看更多Target
</Button>
}
)}
{item2 === 'Target' &&
item.info[item2].map((item3, index3) => {
return (
<Button
type="primary"
type='primary'
className={!item.TargetState ? '' : 'isShowDiv'}
style={{ marginBottom: '5px', marginLeft: '5px' }}
key={index3}
onClick={() => this.getPdid(item3.dataid)}>
onClick={() => this.getPdid(item3.dataid)}
>
{item3.name}
</Button>
)
);
})}
{
item2 === 'Target' && <Button
className={!item.TargetState ? '' : 'isShowDiv'}
style={{ marginBottom: '5px', marginLeft: '5px' }}
onClick={() => this.TargetButton2(item, index)}>
{item2 === 'Target' && (
<Button className={!item.TargetState ? '' : 'isShowDiv'} style={{ marginBottom: '5px', marginLeft: '5px' }} onClick={() => this.TargetButton2(item, index)}>
收起
</Button>
}
)}
{item2 === 'Synonyms' &&
item.info[item2].slice(0, 5).map((item3, index3) => {
return (
<Tag
type="primary"
type='primary'
style={{
fontWeight: 300,
color: 'black',
}}
key={index3}>
key={index3}
>
{' '}
{item3}
</Tag>
)
);
})}
{item2 === 'Gene name' &&
item.info[item2].slice(0, 5).map((item3, index3) => {
return (
<Tag
type="primary"
type='primary'
style={{
fontWeight: 300,
color: 'black',
}}
key={index3}>
key={index3}
>
{' '}
{item3}
</Tag>
)
);
})}
<div />
</div>
)
);
} else {
return (
<div className="left" key={key2}>
<div className='left' key={key2}>
{' '}
<span>{item2}</span>:{item.info[item2]}
</div>
)
);
}
})}
......@@ -440,7 +414,7 @@ export default class SearchList extends Component {
<p><font>DrugBankID：</font>{item.DrugBankID}</p>
<p><font>ChemblID：</font>{item.ChemblID}</p> */}
</div>
<div className="btn-list">
<div className='btn-list'>
{item.right_info &&
Object.entries(item.right_info).map((item2, index2) => {
if (typeof item2[1] === 'string') {
......@@ -449,11 +423,11 @@ export default class SearchList extends Component {
// <span>{item2[0]}:</span>
// {item2[1]}
// </div>
<div className="right-div" key={index2}>
<div className='right-div' key={index2}>
{' '}
<span>{item2[0]}</span>:{item2[1]}
</div>
)
);
}
})}
</div>
......@@ -461,17 +435,15 @@ export default class SearchList extends Component {
<div />
</div>
</Card>
)
})
);
});
return (
<div className="search-div">
<Spin tip="Loading..." size="large" spinning={this.state.loading}>
<Tabs type="card">
<div className='search-div'>
<Spin tip='Loading...' size='large' spinning={this.state.loading}>
<Tabs type='card'>
<TabPane tab={smilesData.name} key={smilesData.name}>
<div className="search-content">
Search Content:{smilesData.drugs_data}
</div>
<div className="search-content">Search Total:{total_num}条</div>
<div className='search-content'>Search Content:{smilesData.drugs_data}</div>
<div className='search-content'>Search Total:{total_num}条</div>
{/* <Checkbox.Group style={{ width: '100%' }} onChange={this.onChangeGroup}>
<div className='CheckboxList'>
<Checkbox value="pdb">pdb</Checkbox>
......@@ -480,16 +452,13 @@ export default class SearchList extends Component {
</div>
</Checkbox.Group> */}
{listItems}
<Pagination
showSizeChanger
onShowSizeChange={this.onShowSizeChange}
onChange={this.onChange}
total={total_num}
/>
<Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange} total={total_num} />
</TabPane>
</Tabs>
</Spin>
</div>
)
);
}
}
export default withRouter(SearchList);
src/routes/Kinase/TargetDetails/index.js
......@@ -1232,26 +1232,22 @@ export default class TargetDetails extends Component {
<div className='div-list'>
<div className='list-one'>
<div>Gene name</div>
<div />
{targetsDetail.Gene_name.map((item) => {
return <Tag>{item}</Tag>;
})}
</div>
<div className='list-one'>
<div>Species</div>
<div />
<div>Species00</div>
{targetsDetail.Species}
</div>
<div className='list-one'>
<div>Uniprot id</div>
<div />
{targetsDetail.Uniport_id}
</div>
{/* <div className="list-one">
<div className='list-one'>
<div>Class</div>
<div />
{targetsDetail.Class}
</div> */}
{targetsDetail.Class || ''}
</div>
</div>
</div>
</div>
......
src/routes/Kinase/index.js
......@@ -3,10 +3,15 @@ import { Form, Input, Button, Select, Tabs, message, Radio, Checkbox, Row, Col }
import LogoTitlte from '../../components/LogoTitlte/index';
import { Jsme } from 'jsme-react';
import qs from 'qs';
import { inject, observer } from 'mobx-react';
import request from '../../utils/request';
import { getQueryString } from '../../utils/utils';
import './style.css';
import { withRouter } from 'react-router-dom';
const { TabPane } = Tabs;
const { Option } = Select;
@inject('kinaseSearch')
@observer
class Home extends React.Component {
state = {
select_db: 'Ligands',
......@@ -71,6 +76,7 @@ class Home extends React.Component {
compoundList: ['DrugName', 'Smiles'],
targetList: ['TargetName', 'UniprotId'],
optionsList: [{ label: '查询drug相关靶点', value: 1 }, { label: '查询ligand相关靶点', value: 2, disabled: false }, { label: '是否有PDB结构', value: 3 }],
activeKey: this.props.kinaseSearch.activeTabKey || 'Drug',
};
// Mutation
CheckChange = (e) => {
......@@ -346,11 +352,18 @@ class Home extends React.Component {
this.setState(() => ({ searchData: searchData }));
// this.setState(()=>({data:e }))
};
componentDidMount() {
console.log('111', this.props.kinaseSearch.searchParams);
if (this.props.kinaseSearch.searchParams.drugs_data) {
this.state.searchData = this.props.kinaseSearch.searchParams;
}
// console.log('222',qs.parse(this.props.location.search.slice(1)),)
// this.getList()
// this.getSelectList()
this.getTargetSelectList();
}
getSelectList = () => {
request
.get('/kinase/target_class/drug')
......@@ -373,28 +386,26 @@ class Home extends React.Component {
});
};
//首页启动调用接口 先checkToken == localStorage.getItem('token')
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);
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);
});
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) => {
const { value } = e.target;
......@@ -465,6 +476,7 @@ class Home extends React.Component {
};
getDrugsList = () => {
let data = this.state.searchData;
this.props.kinaseSearch.addSearchParams(data);
if (data.drugs_data == '') {
return message.warning('请输入查询条件！');
}
......@@ -501,6 +513,8 @@ class Home extends React.Component {
searchData.name = e;
this.setState(() => ({ searchData: searchData }));
console.log(this.state.searchData);
this.setState({ activeKey: e });
this.props.kinaseSearch.setActiveKey(e);
};
getJsme = () => {
console.log(1);
......@@ -524,11 +538,11 @@ class Home extends React.Component {
<div className='home'>
<div className='home-div'>
{/* <LogoTitlte></LogoTitlte> */}
<Tabs onChange={this.callback} type='card'>
<Tabs onChange={this.callback} activeKey={this.state.activeKey} type='card'>
<TabPane tab='Drug' key='Drug'>
<div className='top-div'>
<div>
<Form layout='horizontal'>
<Form onSubmit={this.getDrugsList} 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>
......@@ -556,7 +570,7 @@ class Home extends React.Component {
</Radio.Group>
</Form.Item>
<Form.Item label='' {...formTailLayout}>
<Button type='primary' style={{ width: 150 }} size='large' loading={this.state.loading} onClick={this.getDrugsList}>
<Button type='primary' style={{ width: 150 }} htmlType='submit' size='large' loading={this.state.loading}>
Search
</Button>
</Form.Item>
......@@ -679,4 +693,4 @@ class Home extends React.Component {
}
}
export default Home;
export default withRouter(Home);
src/store/index.js
import appStore from './appStore'
import appStore from './appStore';
// import stepFormStore from '../routes/Entry/FormDemo/store'
import kinaseSearch from './kinaseSearch';
const store = {
appStore,
// stepFormStore
}
export default store
\ No newline at end of file
kinaseSearch,
};
export default store;
src/store/kinaseSearch.js 0 → 100644
import { observable, action } from 'mobx';
class KianseSearch {
@observable searchParams = {};
@observable activeKey = '';
@action addSearchParams(data) {
console.log('data', data);
this.searchParams = data;
}
@action setActiveKey = (key) => {
console.log('key----',key)
this.activeTabKey = key;
};
}
export default new KianseSearch();
src/utils/request.js
......@@ -17,36 +17,28 @@ function disableF12() {
}
// disableF12();
//对axios二次封装
// 封装同步Ajax请求
function checkAjaxToken() {
const token = getQueryString('token') || localStorage.getItem('token');
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://69.235.144.91:8048/yszh-login/auth/checkToken', false);
xhr.setRequestHeader('accessToken', token);
xhr.send(null);
console.log(xhr); //准备状态
if (xhr.status == 200 && JSON.parse(xhr.responseText).code == 200) {
// 获取响应结果
// console.log(xhr.responseText);
token && localStorage.setItem('token', token);
return true;
} else {
console.log('状态码：' + xhr.status + ',原因:' + xhr.responseText);
return false;
}
}
checkAjaxToken();
const token = getQueryString('token') || localStorage.getItem('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');
window.open('http://ysplatform.atelligence-ai.com/#/login', '_self');
}
})
.catch(function(err) {
console.log('err', err);
// window.open('http://69.235.144.91:3048/#/login', '_self');
window.open('http://ysplatform.atelligence-ai.com/#/login', '_self');
});
}
checkFetchToken();
const baseURL = 'http://52.83.169.190:8002/'; //线上正式环境
// const baseURL = 'http://69.235.144.91:8002/'; 测试环境
......@@ -62,15 +54,11 @@ const request = axios.create({
//拦截器
request.interceptors.request.use((config) => {
// alert('拦截器..');
console.log('token---', '拦截器方法校验token');
console.log(config);
if (localStorage.getItem('token')) {
config.headers['accessToken'] = localStorage.getItem('token');
console.log('config',config);
if (checkAjaxToken()) {
return config;
} else {
console.log('token为空....');
// window.open('http://69.235.144.91:3048/#/login', '_self');
window.open('http://ysplatform.atelligence-ai.com/#/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