Skip to content

L
LoginSystem
Commit 91de2397 by wangshufen
Options

feature:修改登录页UI

parent 13542d34
Showing with 827 additions and 819 deletions
jsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"experimentalDecorators": true,
"paths": {
"@/*": ["src/*"]
}
"compilerOptions": {
"baseUrl": "./",
"experimentalDecorators": true,
"paths": {
"@/*": ["src/*"]
}
}
\ No newline at end of file
},
"exclude": ["node_modules", ".vscode", "library", "local", "settings", "temp", "build"]
}
src/components/HeaderBar/index.js
import React from 'react'
import { Icon, Badge, Dropdown, Menu, Modal,message } from 'antd'
import screenfull from 'screenfull'
import { inject, observer } from 'mobx-react'
import { Link, withRouter } from 'react-router-dom'
import { isAuthenticated } from '../../utils/Session'
import request from "../../utils/request";
import React from 'react';
import { Icon, Badge, Dropdown, Menu, Modal, message } from 'antd';
import screenfull from 'screenfull';
import { inject, observer } from 'mobx-react';
import { Link, withRouter } from 'react-router-dom';
import { isAuthenticated } from '../../utils/Session';
import request from '../../utils/request';
//withRouter一定要写在前面，不然路由变化不会反映到props中去
@withRouter @inject('appStore') @observer
@withRouter
@inject('appStore')
@observer
class HeaderBar extends React.Component {
state = {
icon: 'arrows-alt',
count: 100,
visible: false,
avatar: require('./img/defaultUser.jpg')
}
avatar: require('./img/defaultUser.jpg'),
};
componentDidMount () {
componentDidMount() {
screenfull.onchange(() => {
this.setState({
icon: screenfull.isFullscreen ? 'shrink' : 'arrows-alt'
})
})
icon: screenfull.isFullscreen ? 'shrink' : 'arrows-alt',
});
});
}
componentWillUnmount () {
screenfull.off('change')
componentWillUnmount() {
screenfull.off('change');
}
toggle = () => {
this.props.onToggle()
}
this.props.onToggle();
};
screenfullToggle = () => {
if (screenfull.enabled) {
screenfull.toggle()
screenfull.toggle();
}
}
};
logout = () => {
request
.post("/yszh-login/pub/logout", {})
.then((res) => {
console.log(res);
if (res.data.code === 200) {
this.props.appStore.toggleLogin(false)
this.props.history.push(this.props.location.pathname)
message.success('退出成功');
} else {
message.error(res.data.message);
}
})
.catch((err) => {
console.error(err);
});
}
.post('/yszh-login/pub/logout')
.then((res) => {
console.log(res);
if (res.data.code === 200) {
localStorage.removeItem('token');
this.props.appStore.toggleLogin(false);
this.props.history.push(this.props.location.pathname);
message.success('退出成功');
} else {
message.error(res.data.message);
}
})
.catch((err) => {
console.error(err);
});
};
render () {
const {icon, count, visible, avatar} = this.state
const {appStore, collapsed, location} = this.props
render() {
const { icon, count, visible, avatar } = this.state;
const { appStore, collapsed, location } = this.props;
const notLogin = (
<div>
<Link to={{pathname: '/login', state: {from: location}}} style={{color: 'rgba(0, 0, 0, 0.65)'}}>登录</Link>&nbsp;
<img src={require('../../assets/img/defaultUser.jpg')} alt=""/>
<Link to={{ pathname: '/login', state: { from: location } }} style={{ color: 'rgba(0, 0, 0, 0.65)' }}>
登录
</Link>
&nbsp;
<img src={require('../../assets/img/defaultUser.jpg')} alt='' />
</div>
)
);
const menu = (
<Menu className='menu'>
<Menu.ItemGroup title='用户中心' className='menu-group'>
{/* <Menu.Item>你好 - {isAuthenticated()}</Menu.Item>
<Menu.Item>个人信息</Menu.Item> */}
<Menu.Item><span onClick={this.logout}>退出登录</span></Menu.Item>
<Menu.Item>
<span onClick={this.logout}>退出登录</span>
</Menu.Item>
</Menu.ItemGroup>
{/* <Menu.ItemGroup title='设置中心' className='menu-group'>
<Menu.Item>个人设置</Menu.Item>
<Menu.Item>系统设置</Menu.Item>
</Menu.ItemGroup> */}
</Menu>
)
);
const login = (
<Dropdown overlay={menu}>
<img src={avatar} alt=""/>
<img src={avatar} alt='' />
</Dropdown>
)
);
return (
<div id='headerbar'>
{/* <Icon
type={collapsed ? 'menu-unfold' : 'menu-fold'}
className='trigger'
onClick={this.toggle}/> */}
<div style={{lineHeight: '64px', float: 'right'}}>
<div style={{ lineHeight: '64px', float: 'right' }}>
<ul className='header-ul'>
<li><span onClick={this.logout}>退出登录</span></li>
<li>
<span onClick={this.logout}>退出登录</span>
</li>
{/* <li><Icon type={icon} onClick={this.screenfullToggle}/></li> */}
{/* <li onClick={() => this.setState({count: 0})}>
<Badge count={appStore.isLogin ? count : 0} overflowCount={99} style={{marginRight: -17}}>
......@@ -102,16 +111,12 @@ class HeaderBar extends React.Component {
</li> */}
</ul>
</div>
<Modal
footer={null} closable={false}
visible={visible}
wrapClassName="vertical-center-modal"
onCancel={() => this.setState({visible: false})}>
<img src={avatar} alt="" width='100%'/>
<Modal footer={null} closable={false} visible={visible} wrapClassName='vertical-center-modal' onCancel={() => this.setState({ visible: false })}>
<img src={avatar} alt='' width='100%' />
</Modal>
</div>
)
);
}
}
export default HeaderBar
\ No newline at end of file
export default HeaderBar;
src/routes/Home/Docking/index.css
......@@ -85,7 +85,7 @@
}
.Docking-div .Docking-center{
width: 1000px;
background-color: #f0f0f0;
/* background-color: #f0f0f0; */
padding-bottom: 100px;
}
.Docking-div .title-text{
......
src/routes/Home/TargetDetails/index.js
import React, { Component } from 'react'
import { Card,Tooltip,Popover,message,Radio,Button,Tabs,Spin,Table,Tag, Collapse,Modal,Divider} 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, Collapse, Modal, Divider } 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;
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,
};
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,
};
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})
}else{
let data = res.data.data;
this.setState({ targetsDetail: data });
this.setState({ OLDMutationList: data.Mutation });
this.setState({ loading: false });
} 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);
});
}
getPdid(e) {
console.log(e);
this.setState({ visible: true });
this.setState({ pdbId: e });
}
onChangeRadio=(e)=>{
let OLDMutationList= this.state.targetsDetail.Mutation
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
})
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
})
}
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,
});
}
};
getDrug = (e) => {
console.log(e);
let data = {
dataid: e,
};
this.props.history.push({ pathname: '/home/SearchDetails', search: qs.stringify(data) });
};
callback() {}
render() {
const {visible,panelList,Structure,OLDMutationList, name,pdbId,targetsDetail}=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 } = 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',
......@@ -180,158 +169,168 @@ 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>
),
render: (References) => (
<span>
{References.map((item) => {
return (
<Tag
color='blue'
key={item}
onClick={() => {
this.getReferences(item);
}}
>
{item.toUpperCase()}
</Tag>
);
})}
</span>
),
},
// render: Reference => (
// <span>
// {Reference.map(item => {
// return (
// <Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} >
// {item.toUpperCase()}
// </Tag>
// );
// })}
// </span>
// ),
// {
// title: 'PDB',
// dataIndex: 'PDB',
// render: PDB => (
// <span>
// {PDB.map(item => {
// return (
// <Tag color="blue" key={item} onClick={()=>{this.getTag(item)}} >
// {item.toUpperCase()}
// </Tag>
// );
// })}
// </span>
// ),
// },
// {
// title: 'sequence',
// dataIndex: 'sequence',
// key: 'sequence',
// render: sequence => (
// <span>
// {
// <Tooltip placement="topLeft" title={sequence}>
// <Button>Sequence</Button>
// </Tooltip>
// }
// </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>
),
},
];
// render: Reference => (
// <span>
// {Reference.map(item => {
// return (
// <Tag color="blue" key={item} onClick={()=>{this.getReferences(item)}} >
// {item.toUpperCase()}
// </Tag>
// );
// })}
// </span>
// ),
// {
// title: 'PDB',
// dataIndex: 'PDB',
// render: PDB => (
// <span>
// {PDB.map(item => {
// return (
// <Tag color="blue" key={item} onClick={()=>{this.getTag(item)}} >
// {item.toUpperCase()}
// </Tag>
// );
// })}
// </span>
// ),
// },
// {
// title: 'sequence',
// dataIndex: 'sequence',
// key: 'sequence',
// render: sequence => (
// <span>
// {
// <Tooltip placement="topLeft" title={sequence}>
// <Button>Sequence</Button>
// </Tooltip>
// }
// </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 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',
......@@ -341,184 +340,140 @@ export default class TargetDetails extends Component {
dataIndex: 'Foldchange',
key: 'Foldchange',
defaultSortOrder: 'descend',
sorter: (a, b) => a.Foldchange-b.Foldchange
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>
),
},
];
// {
// 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>
),
},
];
return (
<div className='search-details-div'>
<Modal
footer={null} closable={false}
width={850}
visible={visible}
wrapClassName="vertical-center-modal"
onCancel={() => this.setState({visible: false})}>
<div className='Molstar-div'>
<Molstar pdbId={pdbId} />
</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={850} visible={visible} wrapClassName='vertical-center-modal' onCancel={() => this.setState({ visible: false })}>
<div className='Molstar-div'>
<Molstar pdbId={pdbId} />
</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'>
{Object.entries(item)[0][0]}
<div className='zimu-div'>
{Object.entries(item)[0][1].map((item2, index) => {
console.log(item2);
return (
<Tooltip placement='top' 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'>
{Object.entries(item)[0][0]}
<div className='zimu-div'>
{Object.entries(item)[0][1].map((item2,index)=>{
console.log(item2);
return(
<Tooltip placement="top" 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'>
{
targetsDetail.Structure.map((item,index)=>{
return(
<TabPane tab={(item.pdb)} key={index}>
<div className='Molstar-div2'>
<Molstar pdbId={item.pdb} />
</div>
</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 imformation" 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>
</Panel>
<Panel header='Structure' key='2'>
<Tabs defaultActiveKey='0' type='card' tabPosition='left'>
{targetsDetail.Structure.map((item, index) => {
return (
<TabPane tab={item.pdb} key={index}>
<div className='Molstar-div2'>
<Molstar pdbId={item.pdb} />
</div>
</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/Home/index.css
.Docking-div{
/* display: flex; */
padding-top: 100px;
background-color: #fff;
min-height: 100vh;
/* height: 100vh; */
display: flex;
justify-content: center;
}
.Docking-div .home-center{
display: flex;
.Docking-div {
/* display: flex; */
padding-top: 100px;
background-color: #fff;
min-height: 100vh;
/* height: 100vh; */
display: flex;
justify-content: center;
}
.Docking-div .home-center {
display: flex;
}
.Docking-div .home-center .left-div{
width: 20%;
display: flex;
/* align-items: center;
justify-content: center; */
flex-direction: column;
border-left: 1px solid #f0f0f0;
border-right: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
box-sizing: border-box;
}
.Docking-div .left-div Button{
.Docking-div .home-center .center-div {
width: 50%;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 0 80px;
}
.Docking-div .center-div button {
margin-bottom: 10px;
height: 50px;
border: 0px;
border: 1px solid #f0f0f0;
/* border-radius:0px; */
width: 100%;
/* font-family: "Comic Sans MS" */
}
.Docking-div .right-div{
padding: 20px;
/* display: flex; */
align-items: center;
justify-content: center;
padding-left: 100px;
padding-right: 100px;
box-sizing: border-box;
width: 100%;
background-color: #fff;
}
.Docking-div .right-div .right-div-one{
display: flex;
align-items: center;
width: 100%;
/* justify-content: space-between; */
}
.Docking-div .right-div .right-div-one .title-div{
width: 20%;
height: 50px;
border: 0px;
border: 1px solid #000;
/* border-radius:0px; */
width: 60%;
/* font-family: "Comic Sans MS" */
}
/* .Docking-div .right-div {
padding: 20px;
padding-left: 100px;
padding-right: 100px;
box-sizing: border-box;
width: 100%;
background-color: #fff;
} */
.Docking-div .right-div .right-div-one {
display: flex;
align-items: center;
width: 100%;
/* justify-content: space-between; */
}
.Docking-div .right-div .right-div-one .title-div {
width: 20%;
}
.sequencesearch-div .top-div {
margin-bottom: 100px;
}
.sequencesearch-div .sequence-center{
display: flex;
align-items: center;
}
.sequencesearch-div .TextArea-div{
width: 50%;
}
.bottom-butn button{
height: 50px;
width: 200px;
}
.bottom-butn{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
.Jsme-div{
display: flex;
align-items: center;
justify-content: center
}
.Docking-div .top-div{
display: flex;
align-items: center;
justify-content: center;
height: 150px;
margin-bottom: 100px;
}
.sequencesearch-div .sequence-center {
display: flex;
align-items: center;
}
.sequencesearch-div .TextArea-div {
width: 50%;
}
.bottom-butn button {
height: 50px;
width: 200px;
}
.bottom-butn {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
}
.Jsme-div {
display: flex;
align-items: center;
justify-content: center;
}
.Docking-div .top-div {
display: flex;
align-items: center;
justify-content: center;
height: 150px;
}
.Docking-div .Docking-center {
width: 90%;
/* background-color: #f0f0f0; */
padding-bottom: 100px;
}
.Docking-div .title-text {
font-size: 28px;
font-weight: 600;
}
.Docking-div .pharmacophore-div {
align-items: center;
justify-content: center;
}
.Docking-div .pharmacophore-div .pharmacophore-top {
display: flex;
align-items: center;
padding: 5px;
}
.Docking-div .Docking-center{
width: 1000px;
background-color: #f0f0f0;
padding-bottom: 100px;
.Docking-div .displaydiv {
display: none;
}
.Docking-div .title-text{
font-size: 28px;
font-weight: 600;
.Docking-div .taskmanager-div {
width: 100%;
background-color: #fff;
padding: 10px;
}
.Docking-div .pharmacophore-div{
align-items: center;
justify-content: center;
.generalsearch-div {
}
.ant-advanced-search-form {
}
.Docking-div .pharmacophore-div .pharmacophore-top{
display: flex;
align-items: center;
padding: 5px;
.ant-advanced-search-form .ant-form-item {
display: flex;
}
.Docking-div .displaydiv{
display: none;
.ant-advanced-search-form .ant-form-item-control-wrapper {
flex: 1;
}
.Docking-div .taskmanager-div{
width: 100%;
background-color: #fff;
padding: 10px;
.Docking-center .logo-topdiv {
display: flex;
align-items: center;
justify-content: center;
height: 150px;
background-color: #fff;
}
.Docking-center .logo-topdiv img {
height: 150px;
}
.Docking-center .pharmacophore-title {
width: 50%;
}
.Docking-center .pharmacophore-title2 {
width: 25%;
}
.Computational-div {
display: flex;
align-items: center;
justify-content: center;
}
.Computational-div div {
width: 587px;
padding-left: 100px;
font-family: 'Comic Sans MS';
}
.DockingCenter {
height: 30px;
}
.Speed-div {
height: 30px;
}
.Docking-center .home-center {
min-height: 500px;
background-color: #fff;
justify-content: center;
}
.home-center .item-type {
margin: 8px 0;
/* width: 40%; */
}
.home-center .type-name {
font-size: 18px;
font-weight: bold;
}
.home-center .link-btn {
text-align: right;
margin-top: 10px;
}
.ant-card-bordered {
border: none !important;
}
.ant-card-hoverable:hover {
box-shadow: none !important;
}
.generalsearch-div{
}
.ant-advanced-search-form {
}
.ant-advanced-search-form .ant-form-item {
display: flex;
}
.ant-advanced-search-form .ant-form-item-control-wrapper {
flex: 1;
}
.Docking-center .logo-topdiv{
display: flex;
align-items: center;
justify-content: center;
height: 150px;
background-color: #fff;
}
.Docking-center .logo-topdiv img{
height: 150px;
}
.Docking-center .pharmacophore-title{
width: 50%;
}
.Docking-center .pharmacophore-title2{
width: 25%;
}
.Computational-div{
display: flex;
align-items: center;
justify-content: center;
}
.Computational-div div{
width: 587px;
padding-left: 100px;
font-family: "Comic Sans MS"
}
.DockingCenter{
height: 30px;
}
.Speed-div{
height: 30px;
}
.Docking-center .home-center{
min-height: 500px;
background-color: #fff;
}
src/routes/Home/index.js
......@@ -13,13 +13,54 @@ class Home extends React.Component {
state = {
// list: qs.parse(this.props.location.search.slice(1))
list: [],
permissionList: [],
};
componentDidMount() {
if (qs.parse(this.props.location.search.slice(1))) {
// debugger
let list = qs.parse(this.props.location.search.slice(1));
var arr = Array.from(Object.values(list), (x) => x);
// const perList=[
// {name:'小分子数据',
// sublist:[
// {}
// ]
// }
// ]
console.log('list', list);
let arr = Array.from(Object.values(list), (x) => x);
const newList = [
{
type: 1,
typeNameCn: '小分子数据',
typeName: 'Small Molecule Database',
sublist: [],
},
{
type: 2,
typeNameCn: '小分子计算',
typeName: 'Calculation Platform',
sublist: [],
},
{
type: 3,
typeNameCn: '大分子数据',
typeName: 'AntiBody Database',
sublist: [],
},
];
arr.forEach((item) => {
if (item.type == 1) {
newList[0].sublist.push(item);
} else if (item.type == 2) {
newList[1].sublist.push(item);
} else if (item.type == 3) {
newList[2].sublist.push(item);
}
});
console.log('newList', newList);
this.setState({
list: arr,
list: newList,
});
}
}
......@@ -168,7 +209,7 @@ class Home extends React.Component {
});
};
getOne = (e) => {
console.log('token=========',e + `?token=${localStorage.getItem('token')}`);
console.log('token=========', e + `?token=${localStorage.getItem('token')}`);
window.open(e + `?token=${localStorage.getItem('token')}`);
};
......@@ -190,16 +231,11 @@ class Home extends React.Component {
return (
<div className='Docking-div'>
<div className='Docking-center'>
{/* <div className="logo-topdiv">
<img
alt="example"
style={{ height: "100%", padding: "0px" }}
src={require("../../../assets/img/logo.png")}
/>
</div> */}
<div className='logo-topdiv'>
<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/logo.png')} />
</div>
<div className='top-div'>
<Card
hoverable
style={{
width: '100%',
// backgroundColor: "#00FF00",
......@@ -211,30 +247,42 @@ class Home extends React.Component {
}}
>
<div className='Computational-div'>
<div>welcome to our platform</div>
<div>Welcome To Yashen Platform</div>
</div>
</Card>
</div>
<div className='home-center'>
<div className='left-div'>
<div className='mol-png'>
<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/mol.png')} />
</div>
<div className='antibody-png'>
<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/antibody.png')} />
</div>
</div>
<div className='center-div'>
{list.map((item, index) => {
return (
<Button type={item.state ? 'primary' : ''} size='large' onClick={() => this.getListOne(index, item.name)} key={index}>
{item.name}
</Button>
<div className='item-type' onClick={() => this.getListOne(index, item.name)} key={index}>
<div className='type-name'>{item.typeName}</div>
<div className='link-btn'>
{item.sublist.map((ele, index) => {
return (
<Button size='large' onClick={() => this.getOne(ele.url)} key={index}>
{ele.name}
</Button>
);
})}
</div>
</div>
);
})}
</div>
<div className='right-div'>
{list.map((item, index) => {
return (
<a className={item.state ? '' : 'displaydiv'} size='large' onClick={() => this.getOne(item.url)} key={index}>
欢迎进入{item.name}平台
</a>
);
})}
<div className='gene-png'>
<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../assets/img/gene.png')} />
</div>
</div>
</div>
</div>
......
src/routes/Login/AccountLogin.js
......@@ -83,8 +83,12 @@ export default class ProteinView extends Component {
window.localStorage.setItem('token', res.data.result.token);
let indexVOList = res.data.result.indexVOList;
console.log('indexVOList', indexVOList);
// indexVOList.push({ name: 'Kinase', url: 'http://172.16.20.12:3001/#/Kinase', state: false });
// indexVOList.push({ name: 'Computed', url: 'http://172.16.20.12:3002/#/home/Docking', state: false });
// indexVOList.push({ name: 'Kinase', url: 'http://localhost:3002/#/Kinase'});
// indexVOList.push({ name: 'GPCR', url: 'http://localhost:3001/#/home' });
// indexVOList.push({ name: 'Antigen2', url: 'http://localhost:3002/#/home' });
// indexVOList.push({ name: 'PLDM', url: 'http://localhost:3003/#/login' });
// indexVOList.push({ name: 'KG', url: 'http://localhost:3004/#/login' });
// indexVOList.push({ name: 'Computed', url: 'http://172.16.20.12:3002/#/home/Docking'});
indexVOList[0].state = true;
console.log(indexVOList);
this.props.appStore.toggleLogin(true, { username: 'hahah' });
......
src/routes/Login/index.js
import React from 'react'
import BGParticle from '../../utils/BGParticle'
import { notification } from 'antd'
import './style.css'
import { withRouter } from 'react-router-dom'
import { inject, observer } from 'mobx-react/index'
import Loading2 from '../../components/Loading2'
import {preloadingImages} from '../../utils/utils'
import LogoTitlte from '../../components/LogoTitlte/index'
import 'animate.css'
import LoginForm from './LoginForm'
import RegisterForm from './RegisterForm'
import Registered from './Registered'
import React from 'react';
import BGParticle from '../../utils/BGParticle';
import { notification } from 'antd';
import './style.css';
import { withRouter } from 'react-router-dom';
import { inject, observer } from 'mobx-react/index';
import Loading2 from '../../components/Loading2';
import { preloadingImages } from '../../utils/utils';
import LogoTitlte from '../../components/LogoTitlte/index';
import 'animate.css';
import LoginForm from './LoginForm';
import RegisterForm from './RegisterForm';
import Registered from './Registered';
const url = 'http://47.99.130.140/imgs/wallhaven-g83v2e.jpg'
const url = 'http://47.99.130.140/imgs/wallhaven-g83v2e.jpg';
const imgs = [
'http://47.99.130.140/imgs/wallhaven-p8r1e9.jpg',
'http://47.99.130.140/imgs/wallhaven-e7zyy8.jpg',
'http://47.99.130.140/imgs/wallhaven-6k9e7q.jpg',
'http://47.99.130.140/imgs/photo.jpg',
]
];
@withRouter @inject('appStore') @observer
@withRouter
@inject('appStore')
@observer
class Login extends React.Component {
state = {
showBox: 'login', //展示当前表单
url: '', //背景图片
loading:false,
loading2:false,
}
showBox: 'login', //展示当前表单
url: '', //背景图片
loading: false,
loading2: false,
};
componentDidMount () {
const isLogin = this.props.appStore
if(isLogin){
this.props.history.go(1) //当浏览器用后退按钮回到登录页时，判断登录页是否登录，是登录就重定向上个页面
componentDidMount() {
const isLogin = this.props.appStore;
if (isLogin) {
this.props.history.go(1); //当浏览器用后退按钮回到登录页时，判断登录页是否登录，是登录就重定向上个页面
// this.props.appStore.toggleLogin(false) //也可以设置退出登录
}
// this.initPage()
// preloadingImages(imgs) //预加载下一个页面的图片，预加载了第二次为什么还会去请求图片资源？
}
componentWillUnmount () {
this.particle && this.particle.destory()
notification.destroy()
componentWillUnmount() {
this.particle && this.particle.destory();
notification.destroy();
}
//载入页面时的一些处理
initPage = () => {
this.setState({
loading:true
})
this.props.appStore.initUsers()
this.loadImageAsync(url).then(url=>{
this.setState({
loading:false,
url
loading: true,
});
this.props.appStore.initUsers();
this.loadImageAsync(url)
.then((url) => {
this.setState({
loading: false,
url,
});
})
}).then(()=>{
//为什么写在then里？id为backgroundBox的DOM元素是在loading为false时才有，而上面的setState可能是异步的，必须等到setState执行完成后才去获取dom
this.particle = new BGParticle('backgroundBox')
this.particle.init()
// notification.open({
// message:<ul><li>初始账号：admin</li><li>初始密码：admin</li></ul>,
// duration:0,
// className:'login-notification'
// })
})
}
.then(() => {
//为什么写在then里？id为backgroundBox的DOM元素是在loading为false时才有，而上面的setState可能是异步的，必须等到setState执行完成后才去获取dom
this.particle = new BGParticle('backgroundBox');
this.particle.init();
// notification.open({
// message:<ul><li>初始账号：admin</li><li>初始密码：admin</li></ul>,
// duration:0,
// className:'login-notification'
// })
});
};
//切换showbox
switchShowBox = (box) => {
this.setState({
showBox: box
})
}
showBox: box,
});
};
//登录的背景图太大，等载入完后再显示，实际上是图片预加载，
loadImageAsync (url) {
loadImageAsync(url) {
return new Promise(function(resolve, reject) {
const image = new Image();
image.onload = function() {
resolve(url);
};
image.onerror = function() {
console.log('图片载入错误')
console.log('图片载入错误');
};
image.src = url;
});
}
render () {
const {showBox,loading} = this.state
render() {
const { showBox, loading } = this.state;
return (
<div className='index-div'>
<LogoTitlte></LogoTitlte>
<LogoTitlte />
<div id='login-page'>
<div className='home-page-div'>
<div>Yashen API 是一个集成了化学、生物学、计算化学、计算生物学和机器学习的数据驱动的药物发现平台，帮助药物化学家在药物智能发现领域大展身手。</div>
<div> 我们的抗体平台专注于挖掘抗原表位序列和结构，抗体CDR序列，抗原和抗体相互作用的数据，并通过机器学习和计算机模拟理性设计发现高质量的抗体药物。</div>
<div> Yashen API is a data-driven drug discovery platform, which integrates chemistry, biology, computational chemistry, computational biology and machine learning to empower medicinal chemists to make intelligence drug discovery decisions. </div>
<div>Our antibody platform focuses on mining available antigen epitope sequences and structures, antibody sequences and structures, antigen-antibody interactions, and developing various computational tools to discover high quality antibody drugs.</div>
<div className='home-page-div'>
<div>Yashen API 是一个集成了化学、生物学、计算化学、计算生物学和机器学习的数据驱动的药物发现平台，帮助药物化学家在药物智能发现领域大展身手。</div>
<div>我们的数据平台专注于挖掘包括药物和配体结构、蛋白质结构和突变数据在内的 GPCR 数据、Kinase 数据，并整合了蛋白结构-配体作用数据，以及开发知识图谱和计算工具来加速药物发现。</div>
<div> 我们的抗体平台专注于挖掘抗原表位序列和结构，抗体CDR序列，抗原和抗体相互作用的数据，并通过机器学习和计算机模拟理性设计发现高质量的抗体药物。</div>
<div>
{' '}
Yashen API is a data-driven drug discovery platform, which integrates chemistry, biology, computational chemistry, computational biology and machine learning to empower medicinal
chemists to make intelligence drug discovery decisions.{' '}
</div>
<div>
Our platform focuses on mining available GPCR knowledge and Kinase knowledge including corresponding drugs and ligands structure, protein structures and mutation data, involving
protein-ligand interaction data, creating knowledge graph and developing computational tools to accelerate drug discovery.
</div>
<div>
Our antibody platform focuses on mining available antigen epitope sequences and structures, antibody sequences and structures, antigen-antibody interactions, and developing various
computational tools to discover high quality antibody drugs.
</div>
</div>
{
loading ?
<div>
<h3 style={styles.loadingTitle} className='animated bounceInLeft'>载入中...</h3>
<Loading2/>
</div>:
<div>
<div id='backgroundBox' style={styles.backgroundBox}/>
<div className='container'>
<LoginForm
className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'}
switchShowBox={this.switchShowBox}/>
<RegisterForm
activeKey={'3'}
className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'}
switchShowBox={this.switchShowBox}/>
<Registered
className={showBox === 'Registered' ? 'box2 showBox' : 'box hiddenBox'}
switchShowBox={this.switchShowBox}/>
</div>
{loading ? (
<div>
<h3 style={styles.loadingTitle} className='animated bounceInLeft'>
载入中...
</h3>
<Loading2 />
</div>
) : (
<div>
<div id='backgroundBox' style={styles.backgroundBox} />
<div className='container'>
<LoginForm className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
<RegisterForm activeKey={'3'} className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
<Registered className={showBox === 'Registered' ? 'box2 showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
</div>
}
</div>
)}
</div>
</div>
)
);
}
}
......@@ -140,30 +147,30 @@ const styles = {
height: '100vh',
// backgroundImage: `url(${url})`,
backgroundSize: 'cover',
transition:'all .5s',
transition: 'all .5s',
// backgroundColor: '#4FA1D9'
},
focus: {
// transform: 'scale(0.7)',
width: '20px',
opacity: 1
opacity: 1,
},
loadingBox:{
position:'fixed',
top:'50%',
left:'50%',
transform:'translate(-50%,-50%)'
loadingBox: {
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
},
loadingTitle:{
position:'fixed',
top:'50%',
left:'50%',
loadingTitle: {
position: 'fixed',
top: '50%',
left: '50%',
marginLeft: -45,
marginTop: -18,
color:'#000',
fontWeight:500,
fontSize:24
color: '#000',
fontWeight: 500,
fontSize: 24,
},
}
};
export default Login
export default Login;
src/routes/Login/style.css
......@@ -160,7 +160,7 @@
padding: 50px;
box-sizing: border-box;
font-weight: 500;
font-size: 18px;
font-size: 15px;
/* background-color: pink!important; */
}
......
src/utils/request.js
......@@ -29,6 +29,7 @@ const request = axios.create({
headers: {
// 'Content-Type': 'application/json',
accessToken: token,
token,
},
});
......
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