Skip to content

E
elegantDeepGPCR
Commit 33aff8c8 by wangshufen
Options

feature:登录功能添加token校验

parent 89ff34f2
Showing with 497 additions and 552 deletions
.eslintrc.js 0 → 100644
module.exports = {
root: true, //此项是用来告诉eslint找当前配置文件不能往父级查找
env: {
node: true,
},
// "off" -> 0 关闭规则 "warn" -> 1 开启警告规则 "error" -> 2 开启错误规则
rules: {
'generator-star-spacing': 'off',
'no-tabs': 'off',
'no-unused-vars': 'off', //声明的变量未使用
'no-console': 'off',
'no-irregular-whitespace': 'off',
'no-debugger': 'off',
eqeqeq: 'off', // 使用全等
},
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 7,
sourceType: 'module',
},
};
jsconfig.json 0 → 100644
{
"compilerOptions": {
"baseUrl": "./",
"experimentalDecorators": true,
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", ".vscode", "library", "local", "settings", "temp", "build"]
}
src/routes/Home/IndicationDetails/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import { Pagination, message, Button, Tabs, Spin, Table, Tag, Typography } from 'antd' import { Pagination, message, Button, Tabs, Spin, Table, Tag, Typography } from 'antd'
import { request } from '../../../utils/request' import request from '../../../utils/request'
import './index.css' import './index.css'
import qs from 'qs' import qs from 'qs'
const { Title } = Typography const { Title } = Typography
......
src/routes/Home/LigandDetails/index.js
...@@ -18,7 +18,7 @@ import { ...@@ -18,7 +18,7 @@ import {
Menu, Menu,
Dropdown, Dropdown,
} from 'antd' } from 'antd'
import { request } from '../../../utils/request' import request from '../../../utils/request'
import Molstar from 'molstar-react' import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
......
src/routes/Home/MutationDetails/index.js
...@@ -20,7 +20,7 @@ import { ...@@ -20,7 +20,7 @@ import {
Select, Select,
} from 'antd' } from 'antd'
import WrappedIframe from '../../../components/iframePdb' import WrappedIframe from '../../../components/iframePdb'
import { request } from '../../../utils/request' import request from '../../../utils/request'
import Molstar from 'molstar-react' import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
......
src/routes/Home/SearchDetails/index.js
...@@ -23,7 +23,7 @@ import { ...@@ -23,7 +23,7 @@ import {
Dropdown, Dropdown,
} from 'antd' } from 'antd'
import WrappedIframe from '../../../components/iframePdb' import WrappedIframe from '../../../components/iframePdb'
import { request } from '../../../utils/request' import request from '../../../utils/request'
import Molstar from 'molstar-react' import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
......
src/routes/Home/SearchList/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import { Card, Button, Pagination, Tabs, Spin, message, Tag } from 'antd' import { Card, Button, Pagination, Tabs, Spin, message, Tag } from 'antd'
import { request } from '../../../utils/request' import request from '../../../utils/request'
import qs from 'qs' import qs from 'qs'
import './index.css' import './index.css'
const { TabPane } = Tabs const { TabPane } = Tabs
......
src/routes/Home/TargetDetails/index.js
...@@ -22,7 +22,7 @@ import { ...@@ -22,7 +22,7 @@ import {
Pagination, Pagination,
} from 'antd' } from 'antd'
import WrappedIframe from '../../../components/iframePdb' import WrappedIframe from '../../../components/iframePdb'
import { request } from '../../../utils/request' import request from '../../../utils/request'
import Molstar from 'molstar-react' import Molstar from 'molstar-react'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
......
src/routes/Home/index.js
import React from 'react' import React from 'react';
import { import { Form, Input, Button, Select, Tabs, message, Radio, Checkbox, Row, Col } from 'antd';
Form, import LogoTitlte from '../../components/LogoTitlte/index';
Input, import { Jsme } from 'jsme-react';
Button, import qs from 'qs';
Select, import request from '../../utils/request';
Tabs, import './style.css';
message, const { TabPane } = Tabs;
Radio, const { Option } = Select;
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 { class Home extends React.Component {
state = { state = {
select_db: 'Ligands', select_db: 'Ligands',
...@@ -77,586 +66,516 @@ class Home extends React.Component { ...@@ -77,586 +66,516 @@ class Home extends React.Component {
TargetChildClassList: [], TargetChildClassList: [],
compoundList: ['DrugName', 'Smiles'], compoundList: ['DrugName', 'Smiles'],
targetList: ['TargetName', 'UniprotId'], targetList: ['TargetName', 'UniprotId'],
optionsList: [ optionsList: [{ label: '查询drug相关靶点', value: 1 }, { label: '查询ligand相关靶点', value: 2, disabled: false }, { label: '是否有PDB结构', value: 3 }],
{ label: '查询drug相关靶点', value: 1 }, };
{ label: '查询ligand相关靶点', value: 2, disabled: false },
{ label: '是否有PDB结构', value: 3 },
],
}
// Mutation // Mutation
CheckChange = (e) => { CheckChange = (e) => {
console.log(e) console.log(e);
let MutationSearchData = this.state.MutationSearchData let MutationSearchData = this.state.MutationSearchData;
MutationSearchData.idselect_data = e MutationSearchData.idselect_data = e;
this.setState(() => ({ MutationSearchData: MutationSearchData })) this.setState(() => ({ MutationSearchData: MutationSearchData }));
} };
onAllChange = (e) => { onAllChange = (e) => {
if (e.target.checked) { if (e.target.checked) {
let MutationSearchData = this.state.MutationSearchData let MutationSearchData = this.state.MutationSearchData;
let all_idselect_data = [ let all_idselect_data = ['TM1', 'TM4', 'TM7', 'ICL3', 'ECL3', 'N-Term', 'ECL1', 'ICL1', 'TM5', 'TM2', 'TM3', 'TM6', 'ICL2', 'ECL2', 'C-Term'];
'TM1', MutationSearchData.idselect_data = all_idselect_data;
'TM4', this.setState(() => ({ MutationSearchData: MutationSearchData }));
'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 { } else {
let MutationSearchData = this.state.MutationSearchData let MutationSearchData = this.state.MutationSearchData;
let all_idselect_data = [] let all_idselect_data = [];
MutationSearchData.idselect_data = all_idselect_data MutationSearchData.idselect_data = all_idselect_data;
this.setState(() => ({ MutationSearchData: MutationSearchData })) this.setState(() => ({ MutationSearchData: MutationSearchData }));
}
} }
};
getMutationList = () => { getMutationList = () => {
let data = JSON.parse(JSON.stringify(this.state.MutationSearchData)) let data = JSON.parse(JSON.stringify(this.state.MutationSearchData));
if (data.target_class == '' && data.target_data == '') { if (data.target_class == '' && data.target_data == '') {
return message.warning('请输入查询条件！') return message.warning('请输入查询条件！');
} }
this.setState(() => ({ loading: true })) this.setState(() => ({ loading: true }));
request request
.post('/gpcr/mutation_search', data) .post('/gpcr/mutation_search', data)
.then((res) => { .then((res) => {
this.setState(() => ({ loading: false })) this.setState(() => ({ loading: false }));
if (res.data.code === 200) { if (res.data.code === 200) {
console.log(data) console.log(data);
this.props.history.push({ this.props.history.push({
pathname: '/home/SearchList', pathname: '/home/SearchList',
search: qs.stringify(data), search: qs.stringify(data),
}) });
} else { } else {
message.error(res.data.msg) message.error(res.data.msg);
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} };
childClassChange3 = (e) => { childClassChange3 = (e) => {
console.log(e) console.log(e);
let MutationSearchData = this.state.MutationSearchData let MutationSearchData = this.state.MutationSearchData;
MutationSearchData.target_families = e MutationSearchData.target_families = e;
this.setState(() => ({ MutationSearchData: MutationSearchData })) this.setState(() => ({ MutationSearchData: MutationSearchData }));
} };
getClassData3 = (e) => { getClassData3 = (e) => {
console.log(e) console.log(e);
this.setState(() => ({ classData: e })) this.setState(() => ({ classData: e }));
let MutationSearchData = this.state.MutationSearchData let MutationSearchData = this.state.MutationSearchData;
MutationSearchData.target_class = e MutationSearchData.target_class = e;
this.setState(() => ({ MutationSearchData: MutationSearchData })) this.setState(() => ({ MutationSearchData: MutationSearchData }));
let value = this.state.allClassList let value = this.state.allClassList;
let childData = value[e] let childData = value[e];
console.log(childData) console.log(childData);
this.setState(() => ({ childClassList: childData })) this.setState(() => ({ childClassList: childData }));
} };
getMutationValue = (e) => { getMutationValue = (e) => {
const { value } = e.target const { value } = e.target;
let MutationSearchData = this.state.MutationSearchData let MutationSearchData = this.state.MutationSearchData;
MutationSearchData.target_data = value MutationSearchData.target_data = value;
this.setState(() => ({ MutationSearchData: MutationSearchData })) this.setState(() => ({ MutationSearchData: MutationSearchData }));
} };
getChemblValue = (e) => { getChemblValue = (e) => {
const { value } = e.target const { value } = e.target;
let MutationSearchData = this.state.MutationSearchData let MutationSearchData = this.state.MutationSearchData;
MutationSearchData.chembl_id = value MutationSearchData.chembl_id = value;
this.setState(() => ({ MutationSearchData: MutationSearchData })) this.setState(() => ({ MutationSearchData: MutationSearchData }));
} };
// Indication // Indication
getIndicationValue = (e) => { getIndicationValue = (e) => {
const { value } = e.target const { value } = e.target;
let IndicationSearchData = this.state.IndicationSearchData let IndicationSearchData = this.state.IndicationSearchData;
IndicationSearchData.indication = value IndicationSearchData.indication = value;
this.setState(() => ({ IndicationSearchData: IndicationSearchData })) this.setState(() => ({ IndicationSearchData: IndicationSearchData }));
} };
getIndicationList = () => { getIndicationList = () => {
let data = this.state.IndicationSearchData let data = this.state.IndicationSearchData;
if (data.indication == '') { if (data.indication == '') {
return message.warning('请输入查询条件！') return message.warning('请输入查询条件！');
} }
this.setState(() => ({ loading: true })) this.setState(() => ({ loading: true }));
request request
.post('/gpcr/indication_search', data) .post('/gpcr/indication_search', data)
.then((res) => { .then((res) => {
this.setState(() => ({ loading: false })) this.setState(() => ({ loading: false }));
if (res.data.code === 200) { if (res.data.code === 200) {
this.props.history.push({ this.props.history.push({
pathname: '/home/IndicationDetails', pathname: '/home/IndicationDetails',
search: qs.stringify(data), search: qs.stringify(data),
}) });
} else { } else {
message.error(res.data.msg) message.error(res.data.msg);
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} };
// ligend // ligend
getLigendValue = (e) => { getLigendValue = (e) => {
const { value } = e.target const { value } = e.target;
let ligandSearchData = this.state.ligandSearchData let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.ligand_data = value ligandSearchData.ligand_data = value;
this.setState(() => ({ ligandSearchData: ligandSearchData })) this.setState(() => ({ ligandSearchData: ligandSearchData }));
} };
logSmiles2 = (e) => { logSmiles2 = (e) => {
let ligandSearchData = this.state.ligandSearchData let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.ligand_data = e ligandSearchData.ligand_data = e;
this.setState(() => ({ ligandSearchData: ligandSearchData })) this.setState(() => ({ ligandSearchData: ligandSearchData }));
// this.setState(()=>({data:e })) // this.setState(()=>({data:e }))
} };
getLigendList = () => { getLigendList = () => {
let data = this.state.ligandSearchData let data = this.state.ligandSearchData;
if (data.ligand_data == '') { if (data.ligand_data == '') {
return message.warning('请输入查询条件！') return message.warning('请输入查询条件！');
} }
this.setState(() => ({ loading: true })) this.setState(() => ({ loading: true }));
request request
.post('/gpcr/ligand_search', data) .post('/gpcr/ligand_search', data)
.then((res) => { .then((res) => {
console.log(res) console.log(res);
this.setState(() => ({ loading: false })) this.setState(() => ({ loading: false }));
if (res.data.code === 200) { if (res.data.code === 200) {
this.props.history.push({ this.props.history.push({
pathname: '/home/SearchList', pathname: '/home/SearchList',
search: qs.stringify(data), search: qs.stringify(data),
}) });
} else { } else {
message.error(res.data.msg) message.error(res.data.msg);
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} };
getLigandData = (e) => { getLigandData = (e) => {
const { value } = e.target const { value } = e.target;
let ligandSearchData = this.state.ligandSearchData let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.target_data = value ligandSearchData.target_data = value;
this.setState(() => ({ ligandSearchData: ligandSearchData })) this.setState(() => ({ ligandSearchData: ligandSearchData }));
} };
ligandChange = (e) => { ligandChange = (e) => {
let ligandSearchData = this.state.ligandSearchData let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.target_type = e ligandSearchData.target_type = e;
this.setState(() => ({ ligandSearchData: ligandSearchData })) this.setState(() => ({ ligandSearchData: ligandSearchData }));
} };
childClassChange2 = (e) => { childClassChange2 = (e) => {
console.log(e) console.log(e);
let ligandSearchData = this.state.ligandSearchData let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.target_families = e ligandSearchData.target_families = e;
this.setState(() => ({ ligandSearchData: ligandSearchData })) this.setState(() => ({ ligandSearchData: ligandSearchData }));
} };
getClassData2 = (e) => { getClassData2 = (e) => {
console.log(e) console.log(e);
this.setState(() => ({ classData: e })) this.setState(() => ({ classData: e }));
let ligandSearchData = this.state.ligandSearchData let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.target_class = e ligandSearchData.target_class = e;
this.setState(() => ({ ligandSearchData: ligandSearchData })) this.setState(() => ({ ligandSearchData: ligandSearchData }));
let value = this.state.allClassList let value = this.state.allClassList;
let childData = value[e] let childData = value[e];
console.log(childData) console.log(childData);
this.setState(() => ({ childClassList: childData })) this.setState(() => ({ childClassList: childData }));
} };
// Target // Target
getTargetClassData = (e) => { getTargetClassData = (e) => {
this.setState(() => ({ classData: e })) this.setState(() => ({ classData: e }));
let TargetSearchData = this.state.TargetSearchData let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.target_class = e TargetSearchData.target_class = e;
this.setState(() => ({ TargetSearchData: TargetSearchData })) this.setState(() => ({ TargetSearchData: TargetSearchData }));
let value = this.state.TargetClassList let value = this.state.TargetClassList;
value.map((item) => { value.map((item) => {
if (item.name === e) { if (item.name === e) {
this.setState(() => ({ TargetChildClassList: item.content })) this.setState(() => ({ TargetChildClassList: item.content }));
} }
}) });
// let childData=value[e] // let childData=value[e]
// console.log(childData); // console.log(childData);
// this.setState(()=>({childClassList:childData})) // this.setState(()=>({childClassList:childData}))
} };
childTargetClassChange = (e) => { childTargetClassChange = (e) => {
console.log(e) console.log(e);
let TargetSearchData = this.state.TargetSearchData let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.target_families = e TargetSearchData.target_families = e;
this.setState(() => ({ TargetSearchData: TargetSearchData })) this.setState(() => ({ TargetSearchData: TargetSearchData }));
} };
targetChange = (e) => { targetChange = (e) => {
let TargetSearchData = this.state.TargetSearchData let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.target_type = e TargetSearchData.target_type = e;
this.setState(() => ({ TargetSearchData: TargetSearchData })) this.setState(() => ({ TargetSearchData: TargetSearchData }));
} };
getindTargetication = (e) => { getindTargetication = (e) => {
const { value } = e.target const { value } = e.target;
let TargetSearchData = this.state.TargetSearchData let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.indication = value TargetSearchData.indication = value;
this.setState(() => ({ TargetSearchData: TargetSearchData })) this.setState(() => ({ TargetSearchData: TargetSearchData }));
} };
getTargetData2 = (e) => { getTargetData2 = (e) => {
const { value } = e.target const { value } = e.target;
let TargetSearchData = this.state.TargetSearchData let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.target_data = value TargetSearchData.target_data = value;
this.setState(() => ({ TargetSearchData: TargetSearchData })) this.setState(() => ({ TargetSearchData: TargetSearchData }));
} };
get_drug_name = (e) => { get_drug_name = (e) => {
const { value } = e.target const { value } = e.target;
let TargetSearchData = this.state.TargetSearchData let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.drug_name = value TargetSearchData.drug_name = value;
this.setState(() => ({ TargetSearchData: TargetSearchData })) this.setState(() => ({ TargetSearchData: TargetSearchData }));
} };
getTargetList = () => { getTargetList = () => {
let data = this.state.TargetSearchData let data = this.state.TargetSearchData;
if (data.target_class == '' && data.target_data == '') { if (data.target_class == '' && data.target_data == '') {
return message.warning('请输入查询条件！') return message.warning('请输入查询条件！');
} }
this.setState(() => ({ loading: true })) this.setState(() => ({ loading: true }));
request request
.post('/gpcr/targets_search', data) .post('/gpcr/targets_search', data)
.then((res) => { .then((res) => {
console.log(res) console.log(res);
this.setState(() => ({ loading: false })) this.setState(() => ({ loading: false }));
if (res.data.code === 200) { if (res.data.code === 200) {
this.props.history.push({ this.props.history.push({
pathname: '/home/SearchList', pathname: '/home/SearchList',
search: qs.stringify(data), search: qs.stringify(data),
}) });
} else { } else {
message.error(res.data.msg) message.error(res.data.msg);
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} };
onChangeCheckbox = (e) => { onChangeCheckbox = (e) => {
console.log(e) console.log(e);
let TargetSearchData = this.state.TargetSearchData let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.select_status = e TargetSearchData.select_status = e;
this.setState(() => ({ TargetSearchData: TargetSearchData })) this.setState(() => ({ TargetSearchData: TargetSearchData }));
console.log(this.state.TargetSearchData) console.log(this.state.TargetSearchData);
} };
handleChange = (e) => { handleChange = (e) => {
console.log(e) console.log(e);
this.setState(() => ({ select_db: e })) this.setState(() => ({ select_db: e }));
if (e != 'Ligands') { if (e != 'Ligands') {
this.setState(() => ({ data: '' })) this.setState(() => ({ data: '' }));
}
} }
};
childClassChange = (e) => { childClassChange = (e) => {
console.log(e) console.log(e);
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.target_families = e searchData.target_families = e;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
} };
getClassData = (e) => { getClassData = (e) => {
console.log(e) console.log(e);
this.setState(() => ({ classData: e })) this.setState(() => ({ classData: e }));
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.target_class = e searchData.target_class = e;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
console.log(this.state.searchData) console.log(this.state.searchData);
let value = this.state.allClassList let value = this.state.allClassList;
let childData = value[e] let childData = value[e];
console.log(childData) console.log(childData);
this.setState(() => ({ childClassList: childData })) this.setState(() => ({ childClassList: childData }));
} };
targetChange = (e) => { targetChange = (e) => {
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.target_type = e searchData.target_type = e;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
} };
logSmiles = (e) => { logSmiles = (e) => {
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.drugs_data = e searchData.drugs_data = e;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
// this.setState(()=>({data:e })) // this.setState(()=>({data:e }))
} };
componentDidMount () { componentDidMount() {
// this.getList() // this.getList()
// this.getSelectList() // this.getSelectList()
this.getTargetSelectList() this.getTargetSelectList();
} }
getSelectList = () => { getSelectList = () => {
request request
.get('/gpcr/target_class/drug') .get('/gpcr/target_class/drug')
.then((res) => { .then((res) => {
console.log(res) console.log(res);
if (res.data.code === 200) { if (res.data.code === 200) {
console.log(res.data.data) console.log(res.data.data);
this.setState({ this.setState({
classList: Object.keys(res.data.data), classList: Object.keys(res.data.data),
allClassList: res.data.data, allClassList: res.data.data,
}) });
console.log(this.state) console.log(this.state);
} else { } else {
message.error(res.data.msg) message.error(res.data.msg);
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} };
getTargetSelectList = () => { getTargetSelectList = () => {
localStorage.getItem('token') &&
request request
.get('/gpcr/target_class/target') .get('/gpcr/target_class/target')
.then((res) => { .then((res) => {
console.log(res) console.log(res);
if (res.data.code === 200) { if (res.data.code === 200) {
console.log(res.data.data) console.log(res.data.data);
this.setState({ this.setState({
TargetClassList: res.data.data, TargetClassList: res.data.data,
// TargetAllClassList: res.data.data, // TargetAllClassList: res.data.data,
}) });
console.log(this.state) console.log(this.state);
} else { } else {
message.error(res.data.msg) message.error(res.data.msg);
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} };
getValue = (e) => { getValue = (e) => {
const { value } = e.target const { value } = e.target;
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.drugs_data = value searchData.drugs_data = value;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
} };
getindication = (e) => { getindication = (e) => {
const { value } = e.target const { value } = e.target;
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.indication = value searchData.indication = value;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
} };
getTargetData = (e) => { getTargetData = (e) => {
const { value } = e.target const { value } = e.target;
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.target_data = value searchData.target_data = value;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
} };
onChangeRadio = (e) => { onChangeRadio = (e) => {
let value = e.target.value let value = e.target.value;
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.pdb_status = value searchData.pdb_status = value;
this.setState({ this.setState({
searchData: searchData, searchData: searchData,
}) });
} };
onChangeRadio2 = (e) => { onChangeRadio2 = (e) => {
let value = e.target.value let value = e.target.value;
let TargetSearchData = this.state.TargetSearchData let TargetSearchData = this.state.TargetSearchData;
TargetSearchData.pdb_status = value TargetSearchData.pdb_status = value;
this.setState({ this.setState({
TargetSearchData: TargetSearchData, TargetSearchData: TargetSearchData,
}) });
} };
onChangeRadio3 = (e) => { onChangeRadio3 = (e) => {
let value = e.target.value let value = e.target.value;
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.finger = value searchData.finger = value;
this.setState({ this.setState({
searchData: searchData, searchData: searchData,
}) });
} };
onChangeRadio4 = (e) => { onChangeRadio4 = (e) => {
let value = e.target.value let value = e.target.value;
let ligandSearchData = this.state.ligandSearchData let ligandSearchData = this.state.ligandSearchData;
ligandSearchData.finger = value ligandSearchData.finger = value;
this.setState({ this.setState({
ligandSearchData: ligandSearchData, ligandSearchData: ligandSearchData,
}) });
} };
getList = () => { getList = () => {
let data = this.state.searchData let data = this.state.searchData;
request request
.post('/gpcr/ligand_search', qs.stringify(data)) .post('/gpcr/ligand_search', qs.stringify(data))
.then((res) => { .then((res) => {
console.log(res) console.log(res);
if (res.data.code === 200) { if (res.data.code === 200) {
this.props.history.push({ this.props.history.push({
pathname: '/home/SearchList', pathname: '/home/SearchList',
search: qs.stringify(data), search: qs.stringify(data),
}) });
} else { } else {
message.error(res.data.msg) message.error(res.data.msg);
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} };
getDrugsList = () => { getDrugsList = () => {
let data = this.state.searchData let data = this.state.searchData;
if (data.drugs_data == '') { if (data.drugs_data == '') {
return message.warning('请输入查询条件！') return message.warning('请输入查询条件！');
} }
this.setState(() => ({ loading: true })) this.setState(() => ({ loading: true }));
request request
.post('/gpcr/drugs_search', data) .post('/gpcr/drugs_search', data)
.then((res) => { .then((res) => {
console.log(res) console.log(res);
this.setState(() => ({ loading: false })) this.setState(() => ({ loading: false }));
if (res.data.code === 200) { if (res.data.code === 200) {
this.props.history.push({ this.props.history.push({
pathname: '/home/SearchList', pathname: '/home/SearchList',
search: qs.stringify(data), search: qs.stringify(data),
}) });
} else { } else {
message.error(res.data.msg) message.error(res.data.msg);
} }
}) })
.catch((err) => { .catch((err) => {
console.error(err) console.error(err);
}) });
} };
getDraw = () => { getDraw = () => {
this.setState(() => ({ draw: !this.state.draw })) this.setState(() => ({ draw: !this.state.draw }));
} };
compoundChange = (e) => { compoundChange = (e) => {
console.log(e) console.log(e);
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.drugs_type = e searchData.drugs_type = e;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
console.log(this.state.searchData) console.log(this.state.searchData);
} };
callback = (e) => { callback = (e) => {
console.log(e) console.log(e);
let searchData = this.state.searchData let searchData = this.state.searchData;
searchData.name = e searchData.name = e;
this.setState(() => ({ searchData: searchData })) this.setState(() => ({ searchData: searchData }));
console.log(this.state.searchData) console.log(this.state.searchData);
} };
getJsme = () => { getJsme = () => {
console.log(1) console.log(1);
} };
render () { render() {
const { const { select_db, data, data_type, optionsList, draw, SelectList, targetList, classList, classData, childClassList, compoundList, TargetClassList, TargetChildClassList } = this.state;
select_db,
data,
data_type,
optionsList,
draw,
SelectList,
targetList,
classList,
classData,
childClassList,
compoundList,
TargetClassList,
TargetChildClassList,
} = this.state
const formItemLayout = { const formItemLayout = {
labelCol: { span: 8 }, labelCol: { span: 8 },
wrapperCol: { span: 12 }, wrapperCol: { span: 12 },
} };
const formTailLayout = { const formTailLayout = {
labelCol: { span: 8 }, labelCol: { span: 8 },
wrapperCol: { span: 12, offset: 8 }, wrapperCol: { span: 12, offset: 8 },
} };
const formTailLayout2 = { const formTailLayout2 = {
labelCol: { span: 8 }, labelCol: { span: 8 },
wrapperCol: { span: 13, offset: 8 }, wrapperCol: { span: 13, offset: 8 },
} };
return ( return (
<div className="home"> <div className='home'>
<div className="home-div"> <div className='home-div'>
{/* <LogoTitlte></LogoTitlte> */} {/* <LogoTitlte></LogoTitlte> */}
<Tabs onChange={this.callback} type="card"> <Tabs onChange={this.callback} type='card'>
<TabPane tab="Drug" key="Drug"> <TabPane tab='Drug' key='Drug'>
<div className="top-div"> <div className='top-div'>
<div> <div>
<Form layout="horizontal"> <Form layout='horizontal'>
<Form.Item label="请输入药物名或Smiles" {...formItemLayout}> <Form.Item label='请输入药物名或Smiles' {...formItemLayout}>
<Input <Input placeholder='请输入化合物' style={{ width: 250 }} size='large' onChange={this.getValue} value={this.state.searchData.drugs_data} />
placeholder="请输入化合物"
style={{ width: 250 }}
size="large"
onChange={this.getValue}
value={this.state.searchData.drugs_data}
/>
</Form.Item> </Form.Item>
<Form.Item label="" {...formTailLayout}> <Form.Item label='' {...formTailLayout}>
<Button <Button type='primary' style={{ marginRight: '50px' }} onClick={this.getDraw}>
type="primary"
style={{ marginRight: '50px' }}
onClick={this.getDraw}>
画结构 画结构
</Button> </Button>
<div <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}>
className={ <Radio.Group onChange={this.onChangeRadio3} value={this.state.searchData.finger}>
draw ? 'bottom-div' : 'bottom-div isShowDiv'
}>
<Radio.Group
onChange={this.onChangeRadio3}
value={this.state.searchData.finger}>
<Radio value={0}>Substructure</Radio> <Radio value={0}>Substructure</Radio>
{/* <Radio value={1}>有GPCR相关PDB结构</Radio> */} {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
<Radio value={1}>Similar Structure</Radio> <Radio value={1}>Similar Structure</Radio>
</Radio.Group> </Radio.Group>
</div> </div>
<div <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'} onClick={this.getJsme}>
className={draw ? 'bottom-div' : 'bottom-div isShowDiv'} <Jsme height='500px' width='700px' options='oldlook,star' onChange={this.logSmiles} />
onClick={this.getJsme}>
<Jsme
height="500px"
width="700px"
options="oldlook,star"
onChange={this.logSmiles}
/>
</div> </div>
</Form.Item> </Form.Item>
<Form.Item label="使用PDB查询" {...formItemLayout}> <Form.Item label='使用PDB查询' {...formItemLayout}>
<Radio.Group <Radio.Group onChange={this.onChangeRadio} value={this.state.searchData.pdb_status}>
onChange={this.onChangeRadio}
value={this.state.searchData.pdb_status}>
<Radio value={0}>不使用</Radio> <Radio value={0}>不使用</Radio>
{/* <Radio value={1}>有GPCR相关PDB结构</Radio> */} {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
<Radio value={2}>有PDB结构</Radio> <Radio value={2}>有PDB结构</Radio>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Form.Item label="" {...formTailLayout}> <Form.Item label='' {...formTailLayout}>
<Button <Button type='primary' style={{ width: 150 }} size='large' loading={this.state.loading} onClick={this.getDrugsList}>
type="primary"
style={{ width: 150 }}
size="large"
loading={this.state.loading}
onClick={this.getDrugsList}>
Search Search
</Button> </Button>
</Form.Item> </Form.Item>
<Form.Item label="Tips" {...formTailLayout2}> <Form.Item label='Tips' {...formTailLayout2}>
<div className="Tips-div"> <div className='Tips-div'>
<div> <div>1. 本页面提供包含上市药物和进入临床实验的药物相关数据检索功能。</div>
1. <div>2. 您可以直接检索药物名称，精准搜索您所需要的药物。您也可以试着画出您希望查询的分子片段，以检索包含这些片段的药物分子。</div>
本页面提供包含上市药物和进入临床实验的药物相关数据检索功能。 <div>3. 如果您对药物分子与蛋白结晶结构的作用感兴趣，也可以勾选“有PDB结构”选项，检索符合要求的药物分子。</div>
</div>
<div>
2.
您可以直接检索药物名称，精准搜索您所需要的药物。您也可以试着画出您希望查询的分子片段，以检索包含这些片段的药物分子。
</div>
<div>
3.
如果您对药物分子与蛋白结晶结构的作用感兴趣，也可以勾选“有PDB结构”选项，检索符合要求的药物分子。
</div>
{/* <div> {/* <div>
4. 4.
使用药物的适应症作为检索关键词，可以检索出与病症相关的药物分子。 使用药物的适应症作为检索关键词，可以检索出与病症相关的药物分子。
...@@ -671,68 +590,42 @@ class Home extends React.Component { ...@@ -671,68 +590,42 @@ class Home extends React.Component {
</div> </div>
</div> </div>
</TabPane> </TabPane>
<TabPane tab="Target" key="Target"> <TabPane tab='Target' key='Target'>
<div className="top-div"> <div className='top-div'>
<div> <div>
<Form layout="horizontal"> <Form layout='horizontal'>
<Form.Item label="请选择Class" {...formItemLayout}> <Form.Item label='请选择Class' {...formItemLayout}>
<Select <Select value={this.state.TargetSearchData.target_class} style={{ width: 250 }} size='large' placeholder='请选择' onChange={this.getTargetClassData}>
value={this.state.TargetSearchData.target_class}
style={{ width: 250 }}
size="large"
placeholder="请选择"
onChange={this.getTargetClassData}>
{TargetClassList.map((item, index) => { {TargetClassList.map((item, index) => {
return ( return (
<Option key={index} value={item.class}> <Option key={index} value={item.class}>
{item.class} {item.class}
</Option> </Option>
) );
})} })}
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item label='请输入Target name或Uniprot id' {...formItemLayout}>
label="请输入Target name或Uniprot id" <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getTargetData2} value={this.state.TargetSearchData.target_data} />
{...formItemLayout}>
<Input
placeholder="请输入"
style={{ width: 250 }}
size="large"
onChange={this.getTargetData2}
value={this.state.TargetSearchData.target_data}
/>
</Form.Item> </Form.Item>
<Form.Item label="使用PDB查询" {...formItemLayout}> <Form.Item label='使用PDB查询' {...formItemLayout}>
<Radio.Group <Radio.Group onChange={this.onChangeRadio2} value={this.state.TargetSearchData.pdb_status}>
onChange={this.onChangeRadio2}
value={this.state.TargetSearchData.pdb_status}>
<Radio value={0}>不使用</Radio> <Radio value={0}>不使用</Radio>
{/* <Radio value={1}>有GPCR相关PDB结构</Radio> */} {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
<Radio value={2}>有PDB结构</Radio> <Radio value={2}>有PDB结构</Radio>
</Radio.Group> </Radio.Group>
</Form.Item> </Form.Item>
<Form.Item label="" {...formTailLayout}> <Form.Item label='' {...formTailLayout}>
<Button <Button type='primary' style={{ width: 150 }} size='large' loading={this.state.loading} onClick={this.getTargetList}>
type="primary"
style={{ width: 150 }}
size="large"
loading={this.state.loading}
onClick={this.getTargetList}>
Search Search
</Button> </Button>
</Form.Item> </Form.Item>
<Form.Item label="Tips" {...formTailLayout2}> <Form.Item label='Tips' {...formTailLayout2}>
<div className="Tips-div"> <div className='Tips-div'>
<div>1. 本页面提供GPCR相关靶点数据检索功能。</div> <div>1. 本页面提供GPCR相关靶点数据检索功能。</div>
<div> <div>2. 您可以直接检索靶点Uniprot名称或者ID，精准搜索您所需要的靶点。</div>
2. <div>3. 如果您对靶点的结晶结构感兴趣，也可以勾选“是否有PDB结构”选项，检索有结晶结构的靶点。</div>
您可以直接检索靶点Uniprot名称或者ID，精准搜索您所需要的靶点。
</div>
<div>
3.
如果您对靶点的结晶结构感兴趣，也可以勾选“是否有PDB结构”选项，检索有结晶结构的靶点。
</div>
{/* <div> {/* <div>
4. 4.
如果您对靶点的结晶结构感兴趣，也可以勾选“是否有PDB结构”选项，检索有结晶结构的靶点。 如果您对靶点的结晶结构感兴趣，也可以勾选“是否有PDB结构”选项，检索有结晶结构的靶点。
...@@ -747,53 +640,33 @@ class Home extends React.Component { ...@@ -747,53 +640,33 @@ class Home extends React.Component {
</div> </div>
</div> </div>
</TabPane> </TabPane>
<TabPane tab="Mutation" key="Mutation"> <TabPane tab='Mutation' key='Mutation'>
<div className="top-div"> <div className='top-div'>
<div> <div>
<Form layout="horizontal"> <Form layout='horizontal'>
<Form.Item label="请选择Class" {...formItemLayout}> <Form.Item label='请选择Class' {...formItemLayout}>
<Select <Select value={this.state.MutationSearchData.target_class} style={{ width: 250 }} size='large' onChange={this.getClassData3}>
value={this.state.MutationSearchData.target_class}
style={{ width: 250 }}
size="large"
onChange={this.getClassData3}>
{TargetClassList.map((item, index) => { {TargetClassList.map((item, index) => {
return ( return (
<Option key={index} value={item.class}> <Option key={index} value={item.class}>
{item.class} {item.class}
</Option> </Option>
) );
})} })}
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item label='请输入Target name或者Uniprot id' {...formItemLayout}>
label="请输入Target name或者Uniprot id" <Input placeholder='请输入' style={{ width: 250 }} size='large' value={this.state.MutationSearchData.target_data} onChange={this.getMutationValue} />
{...formItemLayout}>
<Input
placeholder="请输入"
style={{ width: 250 }}
size="large"
value={this.state.MutationSearchData.target_data}
onChange={this.getMutationValue}
/>
</Form.Item> </Form.Item>
<Form.Item label="" {...formTailLayout}> <Form.Item label='' {...formTailLayout}>
<Button <Button type='primary' style={{ width: 150 }} size='large' loading={this.state.loading} onClick={this.getMutationList}>
type="primary"
style={{ width: 150 }}
size="large"
loading={this.state.loading}
onClick={this.getMutationList}>
Search Search
</Button> </Button>
</Form.Item> </Form.Item>
<Form.Item label="Tips" {...formTailLayout2}> <Form.Item label='Tips' {...formTailLayout2}>
<div className="Tips-div"> <div className='Tips-div'>
<div>1. 本页面提供GPCR mutation相关数据的搜索功能</div> <div>1. 本页面提供GPCR mutation相关数据的搜索功能</div>
<div> <div>2. 您可以直接搜索指定target或者一类target的mutation数据</div>
2.
您可以直接搜索指定target或者一类target的mutation数据
</div>
{/* <div> 3. 您可以指定mutation的位点来进行检索。</div> {/* <div> 3. 您可以指定mutation的位点来进行检索。</div>
<div> <div>
4. 4.
...@@ -806,24 +679,13 @@ class Home extends React.Component { ...@@ -806,24 +679,13 @@ class Home extends React.Component {
</div> </div>
</div> </div>
</TabPane> </TabPane>
<TabPane tab="Indication" key="Indication"> <TabPane tab='Indication' key='Indication'>
<div className="top-div"> <div className='top-div'>
<div> <div>
<Form layout="horizontal"> <Form layout='horizontal'>
<Form.Item label="输入适应症进行检索" {...formItemLayout}> <Form.Item label='输入适应症进行检索' {...formItemLayout}>
<Input <Input placeholder='请输入适应症' style={{ width: 250 }} size='large' onChange={this.getIndicationValue} value={this.state.IndicationSearchData.indication} />
placeholder="请输入适应症" <Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getIndicationList}>
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 Search
</Button> </Button>
</Form.Item> </Form.Item>
...@@ -831,55 +693,29 @@ class Home extends React.Component { ...@@ -831,55 +693,29 @@ class Home extends React.Component {
</div> </div>
</div> </div>
</TabPane> </TabPane>
<TabPane tab="Ligand" key="Ligand"> <TabPane tab='Ligand' key='Ligand'>
<div className="top-div"> <div className='top-div'>
<div> <div>
<Form layout="horizontal"> <Form layout='horizontal'>
<Form.Item label="输入Chemblid或Smiles" {...formItemLayout}> <Form.Item label='输入Chemblid或Smiles' {...formItemLayout}>
<Input <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getLigendValue} value={this.state.ligandSearchData.ligand_data} />
placeholder="请输入"
style={{ width: 250 }}
size="large"
onChange={this.getLigendValue}
value={this.state.ligandSearchData.ligand_data}
/>
</Form.Item> </Form.Item>
<Form.Item label="" {...formTailLayout}> <Form.Item label='' {...formTailLayout}>
<Button <Button type='primary' style={{ marginRight: '50px' }} onClick={this.getDraw}>
type="primary"
style={{ marginRight: '50px' }}
onClick={this.getDraw}>
画结构 画结构
</Button> </Button>
<Button <Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getLigendList}>
type="primary"
style={{ marginLeft: 50, width: 150 }}
size="large"
loading={this.state.loading}
onClick={this.getLigendList}>
Search Search
</Button> </Button>
<div <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}>
className={ <Radio.Group onChange={this.onChangeRadio4} value={this.state.ligandSearchData.finger}>
draw ? 'bottom-div' : 'bottom-div isShowDiv'
}>
<Radio.Group
onChange={this.onChangeRadio4}
value={this.state.ligandSearchData.finger}>
<Radio value={0}>Substructure</Radio> <Radio value={0}>Substructure</Radio>
{/* <Radio value={1}>有GPCR相关PDB结构</Radio> */} {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
<Radio value={1}>Similar Structure</Radio> <Radio value={1}>Similar Structure</Radio>
</Radio.Group> </Radio.Group>
</div> </div>
<div <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'} onClick={this.getJsme}>
className={draw ? 'bottom-div' : 'bottom-div isShowDiv'} <Jsme height='500px' width='700px' options='oldlook,star' onChange={this.logSmiles2} />
onClick={this.getJsme}>
<Jsme
height="500px"
width="700px"
options="oldlook,star"
onChange={this.logSmiles2}
/>
</div> </div>
</Form.Item> </Form.Item>
</Form> </Form>
...@@ -889,8 +725,8 @@ class Home extends React.Component { ...@@ -889,8 +725,8 @@ class Home extends React.Component {
</Tabs> </Tabs>
</div> </div>
</div> </div>
) );
} }
} }
export default Home export default Home;
src/routes/Kinase/LigandDetails/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import { Card, Tooltip, Pagination, message, Popover, Button, Tabs, Spin, Table, Tag, Input, Collapse, Modal, Form, Select, InputNumber, Typography } from 'antd' import { Card, Tooltip, Pagination, message, Popover, Button, Tabs, Spin, Table, Tag, Input, Collapse, Modal, Form, Select, InputNumber, Typography } from 'antd'
import { request } from '../../../utils/request' import request from '../../../utils/request'
import Molstar from "molstar-react" import Molstar from "molstar-react"
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
......
src/routes/Kinase/SearchDetails/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import { Card,Tooltip,Pagination,message,Popover,Button,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography} from 'antd'; import { Card,Tooltip,Pagination,message,Popover,Button,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography} from 'antd';
import { request } from '../../../utils/request' import request from '../../../utils/request'
import Molstar from "molstar-react"; import Molstar from "molstar-react";
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
......
src/routes/Kinase/SearchList/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import { Card,Button,Pagination,Tabs,Spin,message ,Collapse } from 'antd'; 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 qs from 'qs'
import './index.css' import './index.css'
const { TabPane } = Tabs; const { TabPane } = Tabs;
......
src/routes/Kinase/TargetDetails/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import { Card,Tooltip,Popover,message,Radio,Button,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography,Pagination} from 'antd'; import { Card,Tooltip,Popover,message,Radio,Button,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography,Pagination} from 'antd';
import { request } from '../../../utils/request' import request from '../../../utils/request'
import Molstar from "molstar-react"; import Molstar from "molstar-react";
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
......
src/routes/Kinase/index.js
...@@ -3,7 +3,7 @@ import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from ...@@ -3,7 +3,7 @@ import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from
import LogoTitlte from '../../components/LogoTitlte/index' import LogoTitlte from '../../components/LogoTitlte/index'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
import { request } from '../../utils/request' import request from '../../utils/request'
import './style.css' import './style.css'
const { TabPane } = Tabs; const { TabPane } = Tabs;
const { Option } = Select; const { Option } = Select;
......
src/routes/Login/LoginForm.js
...@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom' ...@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom'
import { inject, observer } from 'mobx-react/index' import { inject, observer } from 'mobx-react/index'
import { Form, Input, message } from 'antd' import { Form, Input, message } from 'antd'
import PromptBox from '../../components/PromptBox' import PromptBox from '../../components/PromptBox'
import { request } from '../../utils/request' import request from '../../utils/request'
import qs from 'qs' import qs from 'qs'
import md5 from 'js-md5' import md5 from 'js-md5'
......
src/routes/drugbank/IndicationDetails/index.js
...@@ -9,7 +9,7 @@ import { ...@@ -9,7 +9,7 @@ import {
Tag, Tag,
Typography, Typography,
} from "antd"; } from "antd";
import { request } from "../../../utils/request"; import request from "../../../utils/request";
import "./index.css"; import "./index.css";
import qs from "qs"; import qs from "qs";
const { Title } = Typography; const { Title } = Typography;
......
src/routes/drugbank/LigandDetails/index.js
...@@ -18,7 +18,7 @@ import { ...@@ -18,7 +18,7 @@ import {
InputNumber, InputNumber,
Typography, Typography,
} from "antd"; } from "antd";
import { request } from "../../../utils/request"; import request from "../../../utils/request";
import Molstar from "molstar-react"; import Molstar from "molstar-react";
import { Jsme } from "jsme-react"; import { Jsme } from "jsme-react";
import qs from "qs"; import qs from "qs";
......
src/routes/drugbank/SearchDetails/index.js
...@@ -18,7 +18,7 @@ import { ...@@ -18,7 +18,7 @@ import {
InputNumber, InputNumber,
Typography, Typography,
} from "antd"; } from "antd";
import { request } from "../../../utils/request"; import request from "../../../utils/request";
import Molstar from "molstar-react"; import Molstar from "molstar-react";
import { Jsme } from "jsme-react"; import { Jsme } from "jsme-react";
import qs from "qs"; import qs from "qs";
......
src/routes/drugbank/SearchList/index.js
import React, { Component } from 'react' import React, { Component } from 'react'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import { Card, Button, Pagination, Tabs, Spin, message, Collapse } from 'antd' 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 qs from 'qs'
import './index.css' import './index.css'
const { TabPane } = Tabs const { TabPane } = Tabs
......
src/routes/drugbank/TargetDetails/index.js
...@@ -19,7 +19,7 @@ import { ...@@ -19,7 +19,7 @@ import {
Typography, Typography,
Pagination, Pagination,
} from "antd"; } from "antd";
import { request } from "../../../utils/request"; import request from "../../../utils/request";
import Molstar from "molstar-react"; import Molstar from "molstar-react";
import { Jsme } from "jsme-react"; import { Jsme } from "jsme-react";
import qs from "qs"; import qs from "qs";
......
src/routes/drugbank/index.js
...@@ -3,7 +3,7 @@ import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from ...@@ -3,7 +3,7 @@ import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from
import LogoTitlte from '../../components/LogoTitlte/index' import LogoTitlte from '../../components/LogoTitlte/index'
import { Jsme } from 'jsme-react' import { Jsme } from 'jsme-react'
import qs from 'qs' import qs from 'qs'
import { request } from '../../utils/request' import request from '../../utils/request'
import './style.css' import './style.css'
const { TabPane } = Tabs; const { TabPane } = Tabs;
const { Option } = Select; const { Option } = Select;
......
src/utils/request.js
import axios from 'axios' import axios from 'axios';
import { u1, u2 } from './url' import { getQueryString } from './utils';
axios.defaults.timeout = 10000
var baseURL = u2()
export const request = axios.create({ const baseURL = 'http://52.83.169.190:8005 /';
baseURL: baseURL,
})
const token = getQueryString('token') || localStorage.getItem('token');
const request = axios.create({
baseURL,
timeout: 10000,
headers: {
accessToken: token,
},
});
function checkToken(config) {
request
.get('http://69.235.144.91:8048/yszh-login/auth/checkToken')
.then((res) => {
console.log(res);
if (res.data.code === 200) {
console.log('token 检验通过');
return config;
} else {
console.log('token校验没通过 返回登录页');
localStorage.removeItem('token');
// window.open('http://localhost:3000/#/login', '_self');
window.open('http://69.235.144.91:3048/#/login', '_self');
}
})
.catch((err) => {
localStorage.removeItem('token');
window.open('http://69.235.144.91:3048/#/login', '_self');
console.log('err', err);
});
}
checkToken();
//拦截器
request.interceptors.request.use((config) => {
console.log('token---', '拦截器方法校验token');
console.log(config);
// alert('拦截器..');
if (!!token) {
checkToken(config);
} else {
console.log('token为空....');
// alert('token为空..');
localStorage.removeItem('token');
window.open('http://69.235.144.91:3048/#/login', '_self');
}
// return config;
});
request.interceptors.response.use(
(res) => {
return res.data;
},
(err) => {
if (err && err.response) {
switch (err.response.status) {
case 400:
console.log('请求错误');
break;
case 401:
console.log('未授权访问');
break;
case 404:
console.log('页面未找到');
break;
default:
console.log('其他错误信息');
}
}
return err;
}
);
export default request;
src/utils/url.js
export function u1 () {
return 'http://52.83.169.190:8005 /'
}
function _getCookie (name) { function _getCookie (name) {
let start, end let start, end
if (document.cookie.length > 0) { if (document.cookie.length > 0) {
...@@ -90,9 +87,7 @@ function _setCookie (name, value, expire) { ...@@ -90,9 +87,7 @@ function _setCookie (name, value, expire) {
document.cookie = name + '=' + escape(value) + '; path=/' + document.cookie = name + '=' + escape(value) + '; path=/' +
(expire ? ';expires=' + date.toGMTString() : '') (expire ? ';expires=' + date.toGMTString() : '')
} }
export function u2 () {
return 'http://52.83.169.190:8005/'
}
function accMul (arg1, arg2) { function accMul (arg1, arg2) {
let m = 0 let m = 0
const s1 = arg1.toString() const s1 = arg1.toString()
......
src/utils/utils.js
...@@ -64,3 +64,16 @@ export function preloadingImages(arr) { ...@@ -64,3 +64,16 @@ export function preloadingImages(arr) {
img.src = item img.src = item
}) })
} }
/**
* 获取URL中指定的参数
*/
export function getQueryString(name) {
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
let r = window.location.hash.split('?')[1] && window.location.hash.split('?')[1].match(reg); //获取url中"?"符后的字符串并正则匹配
let context = '';
if (r != null) context = decodeURIComponent(r[2]);
reg = null;
r = null;
return context == null || context == '' || context == 'undefined' ? '' : context;
}
\ 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