Skip to content

C
computingPlatform
Commit f61ca308 by wangshufen
Options

feature:登录功能添加token校验

parent 050ea14e
Showing with 522 additions and 786 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/App.js
......@@ -14,7 +14,8 @@ class App extends Component {
return (
<Switch>
<Route path='/login' component={Docking}/>
<PrivateRoute path='/' component={Index}/>
{/* <PrivateRoute path='/' component={Index}/> */}
<PrivateRoute path='/' component={Docking}/>
</Switch>
)
}
......
src/routes/Home/Docking/index.js
import React, { Component } from "react";
import {
Tabs,
Button,
Radio,
Upload,
Input,
Select,
Form,
Icon,
Card,
Menu,
Table,
Tag,
message,
Pagination,
Divider,
Modal,
Col,
InputNumber,
} from "antd";
import qs from "qs";
import request from "../../../utils/request";
import { Jsme } from "jsme-react";
import "./index.css";
import React, { Component } from 'react';
import { Tabs, Button, Radio, Upload, Input, Select, Form, Icon, Card, Menu, Table, Tag, message, Pagination, Divider, Modal, Col, InputNumber } from 'antd';
import qs from 'qs';
import request from '../../../utils/request';
import { Jsme } from 'jsme-react';
import './index.css';
const { Option } = Select;
const { TextArea } = Input;
export default class StructureSearch extends Component {
state = {
list: [
{
name: "Welcome",
name: 'Welcome',
state: true,
},
{
name: "Docking",
name: 'Docking',
state: false,
},
{
name: "Pharmacophore",
name: 'Pharmacophore',
state: false,
},
{
name: "Automated Molecule Design",
name: 'Automated Molecule Design',
state: false,
},
{
name: "Retrosynthesis",
name: 'Retrosynthesis',
state: false,
},
{
name: "Task Manager",
name: 'Task Manager',
state: false,
},
],
stateName: "Welcome",
stateName: 'Welcome',
targetsDetail: {
name: "",
name: '',
},
docking: {
pro: "",
lig: "",
ligand_file: "",
receptor_file: "",
ligand_smi: "",
receptor_pdb: "",
grid_center: "notinputcenter",
pro: '',
lig: '',
ligand_file: '',
receptor_file: '',
ligand_smi: '',
receptor_pdb: '',
grid_center: 'notinputcenter',
gridx: null,
gridy: null,
gridz: null,
handlespeed: "",
handlespeed: '',
},
pharmacophoreData: {
lig: "",
ligand_file: "",
ligand_smi: "",
lig: '',
ligand_file: '',
ligand_smi: '',
select_nums: null,
},
ListData: [],
taskManagerData: {
user_id: "1",
task_source: "",
task_status: "",
user_id: '1',
task_source: '',
task_status: '',
page: 1,
page_size: 10,
},
retrosynthesisData: {
lig: "",
ligand_file: "",
ligand_smi: "",
lig: '',
ligand_file: '',
ligand_smi: '',
},
amd: {
pro: "",
lig: "",
ligand_file: "",
receptor_file: "",
ligand_smi: "",
receptor_pdb: "",
pro: '',
lig: '',
ligand_file: '',
receptor_file: '',
ligand_smi: '',
receptor_pdb: '',
num_gen: null,
num_per_gen: null,
seed_per_gen: null,
growType: "",
docking_center: "notinputcenter",
growType: '',
docking_center: 'notinputcenter',
x: null,
y: null,
z: null,
mode: null,
dl_per_gen:null,
dl_score_cutoff: "",
dl_per_gen: null,
dl_score_cutoff: '',
MW: null,
logP_lower: null,
logP_upper: "",
handlespeed: "",
logP_upper: '',
handlespeed: '',
},
fileList: [],
uploading: false,
visible: false,
total_num: 0,
ListData2: [],
Smiles: "",
Smiles: '',
};
getRetrosynthesis = () => {
request
.post("/yszhaizynth/finder", qs.stringify(this.state.retrosynthesisData))
.post('/yszhaizynth/finder', qs.stringify(this.state.retrosynthesisData))
.then((res) => {
console.log(res);
if (res.data.code === 200) {
......@@ -137,7 +118,7 @@ export default class StructureSearch extends Component {
};
getTaskManager = () => {
request
.post("/task/page", this.state.taskManagerData)
.post('/task/page', this.state.taskManagerData)
.then((res) => {
console.log(res);
if (res.data.code === 200) {
......@@ -166,7 +147,7 @@ export default class StructureSearch extends Component {
}
console.log(formData);
request
.post("/pharmacophore/pharmacophore_run", formData)
.post('/pharmacophore/pharmacophore_run', formData)
.then((res) => {
console.log(res);
if (res.data.code === 200) {
......@@ -187,7 +168,7 @@ export default class StructureSearch extends Component {
}
console.log(formData);
request
.post("/docking/docking_run", formData)
.post('/docking/docking_run', formData)
.then((res) => {
console.log(res);
if (res.data.code === 200) {
......@@ -208,7 +189,7 @@ export default class StructureSearch extends Component {
}
console.log(formData);
request
.post("/amd/amd_run", formData)
.post('/amd/amd_run', formData)
.then((res) => {
console.log(res);
if (res.data.code === 200) {
......@@ -318,7 +299,6 @@ export default class StructureSearch extends Component {
});
};
amdmode = (e) => {
let amd = this.state.amd;
amd.mode = e;
this.setState({
......@@ -334,7 +314,6 @@ export default class StructureSearch extends Component {
});
};
amd_dl_per_gen = (e) => {
let amd = this.state.amd;
amd.dl_per_gen = e;
this.setState({
......@@ -342,7 +321,6 @@ export default class StructureSearch extends Component {
});
};
amdMW = (e) => {
let amd = this.state.amd;
amd.MW = e;
this.setState({
......@@ -350,7 +328,6 @@ export default class StructureSearch extends Component {
});
};
amd_logP_lower = (e) => {
let amd = this.state.amd;
amd.logP_lower = e;
this.setState({
......@@ -363,10 +340,10 @@ export default class StructureSearch extends Component {
let amd = this.state.amd;
amd.docking_center = value;
if (amd.docking_center == "notinputcenter") {
amd.x = "";
amd.y = "";
amd.z = "";
if (amd.docking_center == 'notinputcenter') {
amd.x = '';
amd.y = '';
amd.z = '';
}
this.setState({
amd,
......@@ -377,10 +354,10 @@ export default class StructureSearch extends Component {
console.log(value);
let docking = this.state.docking;
docking.grid_center = value;
if (docking.grid_center == "notinputcenter") {
docking.gridx = "";
docking.gridy = "";
docking.gridz = "";
if (docking.grid_center == 'notinputcenter') {
docking.gridx = '';
docking.gridy = '';
docking.gridz = '';
}
this.setState({
docking,
......@@ -429,19 +406,19 @@ export default class StructureSearch extends Component {
};
goList = () => {
if (this.state.stateName == "Docking") {
if (this.state.stateName == 'Docking') {
this.selectionDocking();
return;
}
if (this.state.stateName == "Pharmacophore") {
if (this.state.stateName == 'Pharmacophore') {
this.selectionPharmacophore();
return;
}
if (this.state.stateName == "Retrosynthesis") {
if (this.state.stateName == 'Retrosynthesis') {
this.selectionRetrosynthesis();
return;
}
if (this.state.stateName == "Automated Molecule Design") {
if (this.state.stateName == 'Automated Molecule Design') {
this.selectionAmd();
return;
}
......@@ -450,8 +427,6 @@ export default class StructureSearch extends Component {
console.log(e);
};
getListOne = (e, name) => {
let newList = this.state.list;
this.setState({
stateName: name,
......@@ -463,11 +438,10 @@ export default class StructureSearch extends Component {
}
});
this.setState({
list: newList,
});
if (name == "Task Manager") {
if (name == 'Task Manager') {
this.getTaskManager();
return;
}
......@@ -583,7 +557,7 @@ export default class StructureSearch extends Component {
getResult = (e) => {
this.setState({ visible: true });
console.log(e);
let resultJson = eval("(" + e.resultJson + ")");
let resultJson = eval('(' + e.resultJson + ')');
console.log(resultJson);
var jobId = resultJson.jobId;
let list = resultJson.list;
......@@ -596,10 +570,10 @@ export default class StructureSearch extends Component {
var imageHtml =
'<img style="width:700px;float: left;" src="http://52.83.230.236:8010/static/showreaction/' +
jobId +
"/" +
list[key]["imageFile"] +
'/' +
list[key]['imageFile'] +
'" id="' +
list[key]["imageFile"].replace(".png", "") +
list[key]['imageFile'].replace('.png', '') +
'">';
// console.log(imageHtml);
}
......@@ -637,56 +611,39 @@ export default class StructureSearch extends Component {
});
};
selectionDocking = () => {
if (this.state.docking.pro == "") {
message.warning("please specify how to upload receptor");
if (this.state.docking.pro == '') {
message.warning('please specify how to upload receptor');
return;
}
if (
this.state.docking.pro == "file" &&
this.state.docking.receptor_file == ""
) {
message.warning("please choose receptor file");
if (this.state.docking.pro == 'file' && this.state.docking.receptor_file == '') {
message.warning('please choose receptor file');
return;
}
if (
this.state.docking.pro == "pdbid" &&
this.state.docking.receptor_pdb == ""
) {
message.warning("please enter PDB ID of the receptor");
if (this.state.docking.pro == 'pdbid' && this.state.docking.receptor_pdb == '') {
message.warning('please enter PDB ID of the receptor');
return;
}
if (this.state.docking.lig == "") {
message.warning("please specify how to upload receptor");
if (this.state.docking.lig == '') {
message.warning('please specify how to upload receptor');
return;
}
if (
this.state.docking.lig == "file" &&
this.state.docking.ligand_file == ""
) {
message.warning("please choose ligand file");
if (this.state.docking.lig == 'file' && this.state.docking.ligand_file == '') {
message.warning('please choose ligand file');
return;
}
if (
this.state.docking.lig == "smi" &&
this.state.docking.ligand_smi == ""
) {
message.warning("please enter SMILES of the ligand");
if (this.state.docking.lig == 'smi' && this.state.docking.ligand_smi == '') {
message.warning('please enter SMILES of the ligand');
return;
}
if (this.state.docking.handlespeed == "") {
message.warning("please choose docking speed");
if (this.state.docking.handlespeed == '') {
message.warning('please choose docking speed');
return;
}
if (
this.state.docking.grid_center == "inputcenter" &&
(this.state.docking.gridx == null ||
this.state.docking.gridy == null ||
this.state.docking.gridz == null)
) {
console.log("inputcenter");
if (this.state.docking.grid_center == 'inputcenter' && (this.state.docking.gridx == null || this.state.docking.gridy == null || this.state.docking.gridz == null)) {
console.log('inputcenter');
console.log(this.state.docking);
return message.warning("please input grid center");
return message.warning('please input grid center');
// if (
// this.state.docking.gridx == "" ||
// this.state.docking.gridy == "" ||
......@@ -699,71 +656,54 @@ export default class StructureSearch extends Component {
}
};
selectionAmd = () => {
if (this.state.amd.pro == "") {
message.warning("please specify how to upload receptor");
if (this.state.amd.pro == '') {
message.warning('please specify how to upload receptor');
return;
}
if (this.state.amd.pro == "file" && this.state.amd.receptor_file == "") {
message.warning("please choose receptor file");
if (this.state.amd.pro == 'file' && this.state.amd.receptor_file == '') {
message.warning('please choose receptor file');
return;
}
if (this.state.amd.pro == "pdbid" && this.state.amd.receptor_pdb == "") {
message.warning("please enter PDB ID of the receptor");
if (this.state.amd.pro == 'pdbid' && this.state.amd.receptor_pdb == '') {
message.warning('please enter PDB ID of the receptor');
return;
}
if (this.state.amd.lig == "") {
message.warning("please specify how to upload receptor");
if (this.state.amd.lig == '') {
message.warning('please specify how to upload receptor');
return;
}
if (this.state.amd.lig == "file" && this.state.amd.ligand_file == "") {
message.warning("please choose ligand file");
if (this.state.amd.lig == 'file' && this.state.amd.ligand_file == '') {
message.warning('please choose ligand file');
return;
}
if (this.state.amd.lig == "smi" && this.state.amd.ligand_smi == "") {
message.warning("please enter SMILES of the ligand");
if (this.state.amd.lig == 'smi' && this.state.amd.ligand_smi == '') {
message.warning('please enter SMILES of the ligand');
return;
}
if (this.state.amd.num_gen == null || !(this.state.amd.num_gen % 1 === 0)) {
message.warning(
"num_gen value cannot be a null character and must be an integer greater than 0"
);
message.warning('num_gen value cannot be a null character and must be an integer greater than 0');
return;
}
if (
this.state.amd.num_per_gen == null ||
!(this.state.amd.num_per_gen % 1 === 0)
) {
message.warning(
"num_per_gen value cannot be a null character and must be an integer greater than 0"
);
if (this.state.amd.num_per_gen == null || !(this.state.amd.num_per_gen % 1 === 0)) {
message.warning('num_per_gen value cannot be a null character and must be an integer greater than 0');
return;
}
if (
this.state.amd.seed_per_gen == null ||
!(this.state.amd.seed_per_gen % 1 === 0)
) {
message.warning(
"seed_per_gen value cannot be a null character and must be an integer greater than 0"
);
if (this.state.amd.seed_per_gen == null || !(this.state.amd.seed_per_gen % 1 === 0)) {
message.warning('seed_per_gen value cannot be a null character and must be an integer greater than 0');
return;
}
if (this.state.amd.growType == "") {
message.warning("please choose growType");
if (this.state.amd.growType == '') {
message.warning('please choose growType');
return;
}
if (this.state.amd.handlespeed == "") {
message.warning("please choose docking speed");
if (this.state.amd.handlespeed == '') {
message.warning('please choose docking speed');
return;
}
if (
this.state.amd.docking_center == "inputcenter" &&
(this.state.amd.x == null ||
this.state.amd.y == null ||
this.state.amd.z == null)
) {
message.warning("please input docking center");
if (this.state.amd.docking_center == 'inputcenter' && (this.state.amd.x == null || this.state.amd.y == null || this.state.amd.z == null)) {
message.warning('please input docking center');
return;
// if (
// this.state.amd.gridx == "" ||
......@@ -776,40 +716,24 @@ export default class StructureSearch extends Component {
// document.getElementById("gridxyz").style.visibility="visible";
// document.getElementById("gridxyz").style.visibility="hidden";
}
if (
this.state.amd.mode== null
||!(this.state.amd.mode % 1 === 0)
) {
message.warning("mode cannot be null and is an integer");
if (this.state.amd.mode == null || !(this.state.amd.mode % 1 === 0)) {
message.warning('mode cannot be null and is an integer');
return;
}
if (
this.state.amd.dl_per_gen== null||!(this.state.amd.dl_per_gen % 1 === 0)
) {
message.warning("dl_per_gen cannot be null and is an integer");
if (this.state.amd.dl_per_gen == null || !(this.state.amd.dl_per_gen % 1 === 0)) {
message.warning('dl_per_gen cannot be null and is an integer');
return;
}
if (
this.state.amd.MW== null||!(this.state.amd.MW % 1 === 0)
) {
message.warning("MW cannot be null and is an integer");
if (this.state.amd.MW == null || !(this.state.amd.MW % 1 === 0)) {
message.warning('MW cannot be null and is an integer');
return;
}
if (
this.state.amd.logP_lower== null
) {
message.warning("please input logP_lower");
if (this.state.amd.logP_lower == null) {
message.warning('please input logP_lower');
return;
}
else {
} else {
/* if (this.state.docking.gridx!= "" || this.state.docking.gridy!= "" || this.state.docking.gridz!= "") {
if (this.state.docking.gridx== "" || this.state.docking.gridy== "" || this.state.docking.gridz== ""){
message.warning("please input grid center");
......@@ -820,32 +744,23 @@ export default class StructureSearch extends Component {
}
};
selectionPharmacophore = () => {
if (this.state.pharmacophoreData.lig == "") {
message.warning("please specify how to upload receptor");
if (this.state.pharmacophoreData.lig == '') {
message.warning('please specify how to upload receptor');
return;
}
if (
this.state.pharmacophoreData.lig == "file" &&
this.state.pharmacophoreData.ligand_file == ""
) {
message.warning("please choose ligand file");
if (this.state.pharmacophoreData.lig == 'file' && this.state.pharmacophoreData.ligand_file == '') {
message.warning('please choose ligand file');
return;
}
if (
this.state.pharmacophoreData.lig == "smi" &&
this.state.pharmacophoreData.ligand_smi == ""
) {
message.warning("please enter SMILES of the ligand");
if (this.state.pharmacophoreData.lig == 'smi' && this.state.pharmacophoreData.ligand_smi == '') {
message.warning('please enter SMILES of the ligand');
return;
}
if (this.state.pharmacophoreData.select_nums == null||!(this.state.pharmacophoreData.select_nums % 1 === 0)) {
if (this.state.pharmacophoreData.select_nums == null || !(this.state.pharmacophoreData.select_nums % 1 === 0)) {
console.log(333333);
message.warning(
"The value cannot be a null character and must be an integer greater than 0"
);
message.warning('The value cannot be a null character and must be an integer greater than 0');
return;
}
else {
} else {
/* if (this.state.docking.gridx!= "" || this.state.docking.gridy!= "" || this.state.docking.gridz!= "") {
if (this.state.docking.gridx== "" || this.state.docking.gridy== "" || this.state.docking.gridz== ""){
message.warning("please input grid center");
......@@ -856,8 +771,8 @@ export default class StructureSearch extends Component {
}
};
selectionRetrosynthesis = () => {
if (this.state.retrosynthesisData.lig == "") {
message.warning("please specify how to upload receptor");
if (this.state.retrosynthesisData.lig == '') {
message.warning('please specify how to upload receptor');
return;
}
// if (
......@@ -867,11 +782,8 @@ export default class StructureSearch extends Component {
// message.warning("please choose ligand file");
// return;
// }
if (
this.state.retrosynthesisData.lig == "smi" &&
this.state.retrosynthesisData.ligand_smi == ""
) {
message.warning("please enter SMILES of the ligand");
if (this.state.retrosynthesisData.lig == 'smi' && this.state.retrosynthesisData.ligand_smi == '') {
message.warning('please enter SMILES of the ligand');
return;
} else {
/* if (this.state.docking.gridx!= "" || this.state.docking.gridy!= "" || this.state.docking.gridz!= "") {
......@@ -889,9 +801,9 @@ export default class StructureSearch extends Component {
const props = {
beforeUpload: (file) => {
var fileName = file.name;
var suffixName = fileName.substring(fileName.lastIndexOf("."));
if (suffixName != ".smi") {
return message.error("You can only upload smi file!");
var suffixName = fileName.substring(fileName.lastIndexOf('.'));
if (suffixName != '.smi') {
return message.error('You can only upload smi file!');
}
let docking = this.state.docking;
docking.ligand_file = file;
......@@ -928,9 +840,9 @@ export default class StructureSearch extends Component {
const props2 = {
beforeUpload: (file) => {
var fileName = file.name;
var suffixName = fileName.substring(fileName.lastIndexOf("."));
if (suffixName != ".pdb") {
return message.error("You can only upload pdb file!");
var suffixName = fileName.substring(fileName.lastIndexOf('.'));
if (suffixName != '.pdb') {
return message.error('You can only upload pdb file!');
}
let docking = this.state.docking;
docking.receptor_file = file;
......@@ -946,9 +858,9 @@ export default class StructureSearch extends Component {
const props3 = {
beforeUpload: (file) => {
var fileName = file.name;
var suffixName = fileName.substring(fileName.lastIndexOf("."));
if (suffixName != ".pdb") {
return message.error("You can only upload pdb file!");
var suffixName = fileName.substring(fileName.lastIndexOf('.'));
if (suffixName != '.pdb') {
return message.error('You can only upload pdb file!');
}
let amd = this.state.amd;
amd.receptor_file = file;
......@@ -962,15 +874,7 @@ export default class StructureSearch extends Component {
fileList,
};
const {
list,
total_num,
ListData,
uploading,
fileList,
visible,
ListData2,
} = this.state;
const { list, total_num, ListData, uploading, fileList, visible, ListData2 } = this.state;
const formItemLayout2 = {
labelCol: {
xs: { span: 24 },
......@@ -990,74 +894,60 @@ export default class StructureSearch extends Component {
wrapperCol: { span: 10 },
};
const radioStyle = {
display: "block",
height: "30px",
lineHeight: "30px",
marginBottom: "20px",
width: "700px",
display: 'block',
height: '30px',
lineHeight: '30px',
marginBottom: '20px',
width: '700px',
};
const columns = [
{
title: "Type",
dataIndex: "taskSource",
key: "taskSource",
title: 'Type',
dataIndex: 'taskSource',
key: 'taskSource',
},
{
title: "Status",
dataIndex: "taskStatus",
key: "taskStatus",
title: 'Status',
dataIndex: 'taskStatus',
key: 'taskStatus',
},
{
title: "Start Time",
key: "startTime",
dataIndex: "startTime",
title: 'Start Time',
key: 'startTime',
dataIndex: 'startTime',
},
{
title: "End Time",
key: "endTime",
dataIndex: "endTime",
title: 'End Time',
key: 'endTime',
dataIndex: 'endTime',
},
{
title: "Result",
key: "action",
title: 'Result',
key: 'action',
render: (text, record) => (
<span>
{record.resultFilePath != null && (
<a
rel="noopener noreferrer"
target="_blank"
href={record.resultFilePath}
>
<a rel='noopener noreferrer' target='_blank' href={record.resultFilePath}>
download
</a>
)}
{record.resultFilePath != null && record.resultJson != null && (
<Divider type="vertical" />
)}
{record.resultJson != null && (
<a onClick={() => this.getResult(record)}>result </a>
)}
{record.resultFilePath != null && record.resultJson != null && <Divider type='vertical' />}
{record.resultJson != null && <a onClick={() => this.getResult(record)}>result </a>}
</span>
),
},
];
const columns2 = [
{
title: "Predited Routes",
dataIndex: "imageFile",
key: "imageFile",
render: (imageFile) => (
<img
alt="example"
style={{ height: "100px", padding: "0px" }}
src={imageFile}
/>
),
title: 'Predited Routes',
dataIndex: 'imageFile',
key: 'imageFile',
render: (imageFile) => <img alt='example' style={{ height: '100px', padding: '0px' }} src={imageFile} />,
},
{
title: "Score",
dataIndex: "score",
key: "score",
title: 'Score',
dataIndex: 'score',
key: 'score',
},
// {
// title: "smiles",
......@@ -1071,459 +961,299 @@ export default class StructureSearch extends Component {
const { pre_smiles } = e;
const columns = [
{
title: "Smiles",
dataIndex: "smiles",
key: "smiles",
title: 'Smiles',
dataIndex: 'smiles',
key: 'smiles',
render: (smiles) => (
<div>
<Jsme
height="100px"
width="100px"
options="depict,useopenchemlib"
smiles={smiles}
/>
<Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={smiles} />
</div>
),
},
{
title: "Brand Name",
dataIndex: "brand",
key: "brand",
title: 'Brand Name',
dataIndex: 'brand',
key: 'brand',
},
{
title: "Price",
dataIndex: "origPrice",
key: "origPrice",
title: 'Price',
dataIndex: 'origPrice',
key: 'origPrice',
},
{
title: "Package",
dataIndex: "package",
key: "package",
title: 'Package',
dataIndex: 'package',
key: 'package',
},
];
return (
<Table columns={columns} dataSource={pre_smiles} pagination={false} />
);
return <Table columns={columns} dataSource={pre_smiles} pagination={false} />;
};
return (
<div className="Docking-div">
<Modal
footer={null}
title="The results show"
visible={visible}
wrapClassName="vertical-center-modal"
width={"100%"}
height={"500px"}
onCancel={() => this.setState({ visible: false })}
>
<div className='Docking-div'>
<Modal footer={null} title='The results show' visible={visible} wrapClassName='vertical-center-modal' width={'100%'} height={'500px'} onCancel={() => this.setState({ visible: false })}>
{/* <Table
columns={columns2}
pagination={false}
dataSource={ListData2}
rowKey="id"
/> */}
<Table
bordered
style={{ top: 100 }}
rowKey="item"
dataSource={ListData2}
pagination={false}
columns={columns2}
expandedRowRender={expandedRowRender}
/>
<Table bordered style={{ top: 100 }} rowKey='item' dataSource={ListData2} pagination={false} columns={columns2} expandedRowRender={expandedRowRender} />
</Modal>
<div className="Docking-center">
<div className="logo-topdiv">
<img
alt="example"
style={{ height: "100%", padding: "0px" }}
src={require("../../../assets/img/logo.png")}
/>
<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="top-div">
<div className='top-div'>
<Card
hoverable
style={{
width: "100%",
width: '100%',
// backgroundColor: "#00FF00",
textAlign: "center",
fontSize: "30px",
textAlign: 'center',
fontSize: '30px',
fontWeight: 600,
height: "150px",
lineHeight: "100px",
height: '150px',
lineHeight: '100px',
}}
>
<div className="Computational-div">
<div>Computational Platform11</div>
<div className='Computational-div'>
<div>Computational Platform</div>
</div>
</Card>
</div>
<div>
<div className="left-div">
<div className='left-div'>
{list.map((item, index) => {
return (
<Button
type={item.state ? "primary" : ""}
size="large"
onClick={() => this.getListOne(index, item.name)}
key={index}
>
<Button type={item.state ? 'primary' : ''} size='large' onClick={() => this.getListOne(index, item.name)} key={index}>
{item.name}
</Button>
);
})}
</div>
<div
className={
this.state.stateName === "Welcome" ||
this.state.stateName === "Task Manager"
? "displaydiv"
: "right-div"
}
>
<div className={this.state.stateName === 'Welcome' || this.state.stateName === 'Task Manager' ? 'displaydiv' : 'right-div'}>
{
<div className="generalsearch-div">
<div className="title-text">
{(this.state.stateName === "Automated Molecule Design" &&
"Input Fragment") ||
(this.state.stateName === "Pharmacophore" &&
"Query Molecule") ||
(this.state.stateName === "Retrosynthesis" &&
"New Compound for Synthesis")}
{this.state.stateName != "Automated Molecule Design" &&
"Ligand Preparation" &&
this.state.stateName != "Pharmacophore" &&
"Ligand Preparation" &&
this.state.stateName != "Retrosynthesis" &&
"Ligand Preparation"}
<div className='generalsearch-div'>
<div className='title-text'>
{(this.state.stateName === 'Automated Molecule Design' && 'Input Fragment') ||
(this.state.stateName === 'Pharmacophore' && 'Query Molecule') ||
(this.state.stateName === 'Retrosynthesis' && 'New Compound for Synthesis')}
{this.state.stateName != 'Automated Molecule Design' &&
'Ligand Preparation' &&
this.state.stateName != 'Pharmacophore' &&
'Ligand Preparation' &&
this.state.stateName != 'Retrosynthesis' &&
'Ligand Preparation'}
</div>
<Radio.Group onChange={this.onChange}>
<Radio style={radioStyle} value={"file"}>
<Radio style={radioStyle} value={'file'}>
Upload ligand file from your computer:
<Upload {...props}>
<Button
style={{
marginLeft: "5px",
marginLeft: '5px',
}}
>
<Icon type="upload" /> 选择文件
<Icon type='upload' /> 选择文件
</Button>
</Upload>
</Radio>
<Radio style={radioStyle} value={"smi"}>
<Radio style={radioStyle} value={'smi'}>
Ligand SMILES:
<Input
value={this.state.Smiles}
onChange={this.ligandSmiles}
style={{ width: "200px", marginLeft: "5px" }}
/>
<Input value={this.state.Smiles} onChange={this.ligandSmiles} style={{ width: '200px', marginLeft: '5px' }} />
</Radio>
</Radio.Group>
{/* <div>enter SMILES or draw the ligand structure below:</div> */}
<div className="Jsme-div">
<Jsme
height="300px"
width="500px"
options="oldlook,star"
onChange={this.logSmiles}
/>
<div className='Jsme-div'>
<Jsme height='300px' width='500px' options='oldlook,star' onChange={this.logSmiles} />
</div>
</div>
}
</div>
<div className="right-div">
<div className='right-div'>
{list[0].state && (
<div className="generalsearch-div">
<Card
hoverable
style={{ width: "100%", padding: "0px" }}
cover={
<img
alt="example"
style={{ height: "100%", padding: "0px" }}
src={require("../../../assets/img/u22.gif")}
/>
}
/>
<div className='generalsearch-div'>
<Card hoverable style={{ width: '100%', padding: '0px' }} cover={<img alt='example' style={{ height: '100%', padding: '0px' }} src={require('../../../assets/img/u22.gif')} />} />
</div>
)}
{list[1].state && (
<div className="generalsearch-div">
<div className='generalsearch-div'>
<div>
Availble Library for Docking：
<Radio.Group
onChange={this.onChange}
value={this.state.value}
>
<Radio.Group onChange={this.onChange} value={this.state.value}>
<Radio value={1}>Drugbank</Radio>
<Radio value={2}>Zinc</Radio>
<Radio value={3}>Enamine</Radio>
<Radio value={4}>Maybridge</Radio>
</Radio.Group>
</div>
<div className="title-text">Receptor preparation</div>
<Radio.Group
value={this.state.docking.pro}
onChange={this.Receptorpreparation}
>
<Radio style={radioStyle} value={"file"}>
<div className='title-text'>Receptor preparation</div>
<Radio.Group value={this.state.docking.pro} onChange={this.Receptorpreparation}>
<Radio style={radioStyle} value={'file'}>
Upload receptor file from your computer:
<Upload {...props2}>
<Button
style={{
marginLeft: "5px",
marginLeft: '5px',
}}
>
<Icon type="upload" /> 选择文件
<Icon type='upload' /> 选择文件
</Button>
</Upload>
</Radio>
<Radio style={radioStyle} value={"pdbid"}>
<Radio style={radioStyle} value={'pdbid'}>
Specify PDB ID of receptor:
<Input
style={{ width: "200px", marginLeft: "5px" }}
value={this.state.docking.receptor_pdb}
onChange={this.SpecifyPDB}
/>
<Input style={{ width: '200px', marginLeft: '5px' }} value={this.state.docking.receptor_pdb} onChange={this.SpecifyPDB} />
</Radio>
</Radio.Group>
<div className="DockingCenter">
<div className='DockingCenter'>
Docking Center：
<Radio.Group
onChange={this.onChangeDockingCenter}
value={this.state.docking.grid_center}
>
<Radio value={"inputcenter"}>yes</Radio>
<Radio value={"notinputcenter"}>no</Radio>
<Radio.Group onChange={this.onChangeDockingCenter} value={this.state.docking.grid_center}>
<Radio value={'inputcenter'}>yes</Radio>
<Radio value={'notinputcenter'}>no</Radio>
</Radio.Group>
</div>
{this.state.docking.grid_center == "inputcenter" && (
<Form layout="inline">
{this.state.docking.grid_center == 'inputcenter' && (
<Form layout='inline'>
{/* <Form.Item label="Form Layout" {...formItemLayout} /> */}
<Form.Item label="grid_x" {...formItemLayout3}>
<InputNumber
style={{width:'150px'}}
value={this.state.docking.gridx}
onChange={this.grid_x}
placeholder="input placeholder"
/>
<Form.Item label='grid_x' {...formItemLayout3}>
<InputNumber style={{ width: '150px' }} value={this.state.docking.gridx} onChange={this.grid_x} placeholder='input placeholder' />
</Form.Item>
<Form.Item label="grid_y" {...formItemLayout3}>
<InputNumber
style={{width:'150px'}}
placeholder="input placeholder"
onChange={this.grid_y}
value={this.state.docking.gridy}
/>
<Form.Item label='grid_y' {...formItemLayout3}>
<InputNumber style={{ width: '150px' }} placeholder='input placeholder' onChange={this.grid_y} value={this.state.docking.gridy} />
</Form.Item>
<Form.Item label="grid_z" {...formItemLayout3}>
<InputNumber
style={{width:'150px'}}
placeholder="input placeholder"
onChange={this.grid_z}
value={this.state.docking.gridz}
/>
<Form.Item label='grid_z' {...formItemLayout3}>
<InputNumber style={{ width: '150px' }} placeholder='input placeholder' onChange={this.grid_z} value={this.state.docking.gridz} />
</Form.Item>
</Form>
)}
<div className="Speed-div">
<div className='Speed-div'>
Speed：
<Radio.Group
onChange={this.onChangeSpeed}
value={this.state.docking.handlespeed}
>
<Radio value={"slow"}>accurate</Radio>
<Radio value={"quick"}>quick</Radio>
<Radio value={"highpass"}>high throught</Radio>
<Radio.Group onChange={this.onChangeSpeed} value={this.state.docking.handlespeed}>
<Radio value={'slow'}>accurate</Radio>
<Radio value={'quick'}>quick</Radio>
<Radio value={'highpass'}>high throught</Radio>
</Radio.Group>
</div>
</div>
)}
{list[2].state && (
<div className="pharmacophore-div">
<div className="pharmacophore-top">
<div className="pharmacophore-title">
Pharmacophore Database from PDB Rharmacophore:
</div>
<div className='pharmacophore-div'>
<div className='pharmacophore-top'>
<div className='pharmacophore-title'>Pharmacophore Database from PDB Rharmacophore:</div>
<Radio.Group onChange={this.onChange} value={1}>
<Radio value={1}>PDB</Radio>
</Radio.Group>
</div>
<div className="pharmacophore-top">
<div className="pharmacophore-title2">
Number of Results Retained:
</div>
<div className='pharmacophore-top'>
<div className='pharmacophore-title2'>Number of Results Retained:</div>
<div>
<InputNumber
min={0}
onChange={this.select_nums}
value={this.state.pharmacophoreData.select_nums}
style={{ width: "200px" }}
/>
<InputNumber min={0} onChange={this.select_nums} value={this.state.pharmacophoreData.select_nums} style={{ width: '200px' }} />
</div>
</div>
</div>
)}
{list[3].state && (
<div className="generalsearch-div">
<Form className="ant-advanced-search-form">
<div className='generalsearch-div'>
<Form className='ant-advanced-search-form'>
<Col span={12}>
<Form.Item label="num_gen" {...formItemLayout3}>
<InputNumber
style={{width:'150px'}}
min={0}
placeholder="input placeholder"
onChange={this.num_gen}
value={this.state.amd.num_gen}
/>
<Form.Item label='num_gen' {...formItemLayout3}>
<InputNumber style={{ width: '150px' }} min={0} placeholder='input placeholder' onChange={this.num_gen} value={this.state.amd.num_gen} />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="num_per_gen" {...formItemLayout3}>
<InputNumber
style={{width:'150px'}}
min={0}
onChange={this.num_per_gen}
value={this.state.amd.num_per_gen}
placeholder="input placeholder"
/>
<Form.Item label='num_per_gen' {...formItemLayout3}>
<InputNumber style={{ width: '150px' }} min={0} onChange={this.num_per_gen} value={this.state.amd.num_per_gen} placeholder='input placeholder' />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="seed_per_gen" {...formItemLayout3}>
<InputNumber
style={{width:'150px'}}
min={0}
onChange={this.seed_per_gen}
value={this.state.amd.seed_per_gen}
placeholder="input placeholder"
/>
<Form.Item label='seed_per_gen' {...formItemLayout3}>
<InputNumber style={{ width: '150px' }} min={0} onChange={this.seed_per_gen} value={this.state.amd.seed_per_gen} placeholder='input placeholder' />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="grow type" {...formItemLayout3}>
<Form.Item label='grow type' {...formItemLayout3}>
{/* <Input
onChange={this.growType}
value={this.state.amd.growType}
placeholder="input placeholder"
/> */}
<Select onChange={this.growType} style={{width:'150px'}}>
<Option value="grow">grow</Option>
<Option value="mutation">mutation</Option>
<Option value="bioisoteric">bioisoteric</Option>
<Option value="reaction">reaction</Option>
<Select onChange={this.growType} style={{ width: '150px' }}>
<Option value='grow'>grow</Option>
<Option value='mutation'>mutation</Option>
<Option value='bioisoteric'>bioisoteric</Option>
<Option value='reaction'>reaction</Option>
</Select>
</Form.Item>
</Col>
</Form>
<div className="title-text">Docking</div>
<div className='title-text'>Docking</div>
<div className="Speed-div">
<div className='Speed-div'>
Speed：
<Radio.Group
onChange={this.amdSpeed}
value={this.state.amd.handlespeed}
>
<Radio value={"XP"}>accurate</Radio>
<Radio value={"SP"}>quick</Radio>
<Radio value={"HTVS"}>high throught Ⅰ</Radio>
<Radio value={"vina"}>high throught Ⅱ</Radio>
<Radio.Group onChange={this.amdSpeed} value={this.state.amd.handlespeed}>
<Radio value={'XP'}>accurate</Radio>
<Radio value={'SP'}>quick</Radio>
<Radio value={'HTVS'}>high throught Ⅰ</Radio>
<Radio value={'vina'}>high throught Ⅱ</Radio>
</Radio.Group>
</div>
<Radio.Group
value={this.state.amd.pro}
onChange={this.onChangeAmd}
>
<Radio style={radioStyle} value={"file"}>
<Radio.Group value={this.state.amd.pro} onChange={this.onChangeAmd}>
<Radio style={radioStyle} value={'file'}>
Upload receptor file from your computer:
<Upload {...props3}>
<Button style={{ marginLeft: "5px" }}>
<Icon type="upload" /> 选择文件
<Button style={{ marginLeft: '5px' }}>
<Icon type='upload' /> 选择文件
</Button>
</Upload>
</Radio>
<Radio style={radioStyle} value={"pdbid"}>
<Radio style={radioStyle} value={'pdbid'}>
Specify PDB ID of receptor:
<Input
style={{ width: "200px", marginLeft: "5px" }}
value={this.state.amd.receptor_pdb}
onChange={this.SpecifyPDB2}
/>
<Input style={{ width: '200px', marginLeft: '5px' }} value={this.state.amd.receptor_pdb} onChange={this.SpecifyPDB2} />
</Radio>
</Radio.Group>
<div className="DockingCenter">
<div className='DockingCenter'>
Docking Center：
<Radio.Group
onChange={this.onChangeAmdCenter}
value={this.state.amd.docking_center}
>
<Radio value={"inputcenter"}>yes</Radio>
<Radio value={"notinputcenter"}>no</Radio>
<Radio.Group onChange={this.onChangeAmdCenter} value={this.state.amd.docking_center}>
<Radio value={'inputcenter'}>yes</Radio>
<Radio value={'notinputcenter'}>no</Radio>
</Radio.Group>
</div>
{this.state.amd.docking_center == "inputcenter" && (
<Form layout="inline">
<Form.Item label="X" {...formItemLayout}>
<InputNumber
style={{width:'150px'}}
placeholder="input placeholder"
value={this.state.amd.x}
onChange={this.amd_x}
/>
{this.state.amd.docking_center == 'inputcenter' && (
<Form layout='inline'>
<Form.Item label='X' {...formItemLayout}>
<InputNumber style={{ width: '150px' }} placeholder='input placeholder' value={this.state.amd.x} onChange={this.amd_x} />
</Form.Item>
<Form.Item label="Y" {...formItemLayout}>
<InputNumber
style={{width:'150px'}}
placeholder="input placeholder"
onChange={this.amd_y}
value={this.state.amd.y}
/>
<Form.Item label='Y' {...formItemLayout}>
<InputNumber style={{ width: '150px' }} placeholder='input placeholder' onChange={this.amd_y} value={this.state.amd.y} />
</Form.Item>
<Form.Item label="Z" {...formItemLayout}>
<InputNumber
style={{width:'150px'}}
placeholder="input placeholder"
onChange={this.amd_z}
value={this.state.amd.z}
/>
<Form.Item label='Z' {...formItemLayout}>
<InputNumber style={{ width: '150px' }} placeholder='input placeholder' onChange={this.amd_z} value={this.state.amd.z} />
</Form.Item>
</Form>
)}
<div className="title-text">Deep Learning</div>
<div className='title-text'>Deep Learning</div>
<Form
className="generalsearch-div"
style={{ height: "80px" }}
>
<Form className='generalsearch-div' style={{ height: '80px' }}>
{/* <Form.Item label="Form Layout" {...formItemLayout} /> */}
<Col span={12}>
<Form.Item label="mode" {...formItemLayout3}>
<InputNumber
style={{width:'150px'}}
value={this.state.amd.mode}
onChange={this.amdmode}
placeholder="input placeholder"
/>
<Form.Item label='mode' {...formItemLayout3}>
<InputNumber style={{ width: '150px' }} value={this.state.amd.mode} onChange={this.amdmode} placeholder='input placeholder' />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="dl_per_gen" {...formItemLayout3}>
<InputNumber
style={{width:'150px'}}
value={this.state.amd.dl_per_gen}
onChange={this.amd_dl_per_gen}
placeholder="input placeholder"
/>
<Form.Item label='dl_per_gen' {...formItemLayout3}>
<InputNumber style={{ width: '150px' }} value={this.state.amd.dl_per_gen} onChange={this.amd_dl_per_gen} placeholder='input placeholder' />
</Form.Item>
</Col>
{/* <Col span={12}>
......@@ -1535,30 +1265,17 @@ export default class StructureSearch extends Component {
</Form.Item>
</Col> */}
</Form>
<div className="title-text">Properties</div>
<Form
className="generalsearch-div"
style={{ height: "100px" }}
>
<div className='title-text'>Properties</div>
<Form className='generalsearch-div' style={{ height: '100px' }}>
{/* <Form.Item label="Form Layout" {...formItemLayout} /> */}
<Col span={12}>
<Form.Item label="MW" {...formItemLayout3}>
<InputNumber
style={{width:'150px'}}
value={this.state.amd.MW}
onChange={this.amdMW}
placeholder="input placeholder"
/>
<Form.Item label='MW' {...formItemLayout3}>
<InputNumber style={{ width: '150px' }} value={this.state.amd.MW} onChange={this.amdMW} placeholder='input placeholder' />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="logP_lower" {...formItemLayout3}>
<InputNumber
style={{width:'150px'}}
value={this.state.amd.logP_lower}
onChange={this.amd_logP_lower}
placeholder="input placeholder"
/>
<Form.Item label='logP_lower' {...formItemLayout3}>
<InputNumber style={{ width: '150px' }} value={this.state.amd.logP_lower} onChange={this.amd_logP_lower} placeholder='input placeholder' />
</Form.Item>
</Col>
{/* <Col span={12}>
......@@ -1573,75 +1290,45 @@ export default class StructureSearch extends Component {
</div>
)}
{list[5].state && (
<div className="taskmanager-div">
<div className="search-div">
<Form layout="inline">
<Form.Item label="type">
<Select
style={{ width: 120 }}
onChange={this.handleChange}
defaultValue=""
>
<Option value="1">retrosynthesis</Option>
<Option value="2">docking</Option>
<Option value="3">amd</Option>
<Option value="4">pharmacophore</Option>
<Option value="">all</Option>
<div className='taskmanager-div'>
<div className='search-div'>
<Form layout='inline'>
<Form.Item label='type'>
<Select style={{ width: 120 }} onChange={this.handleChange} defaultValue=''>
<Option value='1'>retrosynthesis</Option>
<Option value='2'>docking</Option>
<Option value='3'>amd</Option>
<Option value='4'>pharmacophore</Option>
<Option value=''>all</Option>
</Select>
</Form.Item>
<Form.Item label="status">
<Select
style={{ width: 120 }}
onChange={this.handleChange2}
defaultValue=""
>
<Option value="1">running</Option>
<Option value="2">finshed</Option>
<Option value="3">others</Option>
<Option value="">all</Option>
<Form.Item label='status'>
<Select style={{ width: 120 }} onChange={this.handleChange2} defaultValue=''>
<Option value='1'>running</Option>
<Option value='2'>finshed</Option>
<Option value='3'>others</Option>
<Option value=''>all</Option>
</Select>
</Form.Item>
<Form.Item>
<Button type="primary" onClick={this.getTaskManager}>
<Button type='primary' onClick={this.getTaskManager}>
search
</Button>
</Form.Item>
</Form>
</div>
<div className="list-div">
<Table
columns={columns}
pagination={false}
dataSource={ListData}
rowKey="id"
/>
<Pagination
showSizeChanger
onShowSizeChange={this.onShowSizeChange}
onChange={this.onChange2}
total={total_num}
/>
<div className='list-div'>
<Table columns={columns} pagination={false} dataSource={ListData} rowKey='id' />
<Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange2} total={total_num} />
</div>
</div>
)}
</div>
</div>
<div
className={
this.state.stateName === "Welcome" ||
this.state.stateName === "Task Manager"
? "displaydiv"
: "bottom-butn"
}
>
<Button
onClick={this.goList}
type="primary"
size="large"
shape="round"
>
<div className={this.state.stateName === 'Welcome' || this.state.stateName === 'Task Manager' ? 'displaydiv' : 'bottom-butn'}>
<Button onClick={this.goList} type='primary' size='large' shape='round'>
Run
</Button>
</div>
......
src/routes/Home/TargetDetails/index.js
......@@ -496,7 +496,7 @@ export default class TargetDetails extends Component {
columns={columnsMutation}
/>
</Panel>
<Panel header="Drug & Clinical imformation" key="4">
<Panel header="Drug & Clinical information" key="4">
<Table
bordered
rowKey='item'
......
src/routes/Home/index.js
import React from "react";
import {
Form,
Input,
Button,
Select,
Tabs,
message,
Radio,
Checkbox,
Row,
Col,
Card
} from "antd";
import LogoTitlte from "../../components/LogoTitlte/index";
import { Jsme } from "jsme-react";
import qs from "qs";
import request from "../../utils/request";
import "./style.css";
import React from 'react';
import { Form, Input, Button, Select, Tabs, message, Radio, Checkbox, Row, Col, Card } 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;
const { Meta } = Card;
class Home extends React.Component {
state = {
select_db: "Ligands",
data: "",
select_db: 'Ligands',
data: '',
page: 1,
page_size: 10,
data_type: "smile",
target_class: "",
data_type: 'smile',
target_class: '',
// target_families:'',
searchData: {
antibodyName: "",
species: "",
antibodyType: "",
antigenName: "",
clinicalIndication: "",
companies: "",
status: "",
antibodyName: '',
species: '',
antibodyType: '',
antigenName: '',
clinicalIndication: '',
companies: '',
status: '',
pageNum: 1,
pageSize: 10,
},
......@@ -47,17 +35,17 @@ class Home extends React.Component {
StatusList: [],
draw: false,
classList: [],
classData: "All Class",
classData: 'All Class',
allClassList: {},
childClassList: [],
list: [
{
name: "general search",
name: 'general search',
state: true,
searchType: 1,
},
{
name: "cdr search",
name: 'cdr search',
state: false,
searchType: 2,
},
......@@ -117,7 +105,7 @@ class Home extends React.Component {
console.log(qs.parse(this.props.location.search.slice(1)));
this.setState({ loading: true });
request
.get("/common/codes")
.get('/common/codes')
.then((res) => {
console.log(res);
if (res.data.code === 0) {
......@@ -161,7 +149,7 @@ class Home extends React.Component {
clinicalIndication: this.state.searchData.clinicalIndication,
};
this.props.history.push({
pathname: "/home/AutoimmuneDiseases",
pathname: '/home/AutoimmuneDiseases',
search: qs.stringify(data),
});
};
......@@ -169,7 +157,7 @@ class Home extends React.Component {
getList = () => {
let data = this.state.searchData;
this.props.history.push({
pathname: "/home/StructureSearch",
pathname: '/home/StructureSearch',
search: qs.stringify(data),
});
};
......@@ -224,10 +212,10 @@ class Home extends React.Component {
wrapperCol: { span: 13, offset: 8 },
};
return (
<div className="home">
<div className='home'>
<LogoTitlte />
<div className="home-div">
<div className="top-div">
<div className='home-div'>
<div className='top-div'>
{/* <Tabs onChange={this.callback} type="card">
<TabPane tab="search" key="1">
<Button type="primary" onClick={this.getList} >结构搜索</Button>
......@@ -237,8 +225,8 @@ class Home extends React.Component {
</TabPane>
</Tabs> */}
<div className="home-top-div">
<div className="left-div">
<div className='home-top-div'>
<div className='left-div'>
{list.map((item, index) => {
// return (
// <Button
......@@ -253,67 +241,27 @@ class Home extends React.Component {
// );
})}
</div>
<div className="right-div">
<div className='right-div'>
{list[0].state && (
<Button type="primary" onClick={this.getList}>
<Button type='primary' onClick={this.getList}>
结构搜索
</Button>
)}
{list[1].state && (
<Button type="primary">docking retrosynthesis</Button>
)}
{list[1].state && <Button type='primary'>docking retrosynthesis</Button>}
</div>
</div>
</div>
</div>
<div className="cardLIst">
<Card
hoverable
style={{ width: 240 }}
cover={
<img
alt="example"
src="http://52.83.169.190:3003/images/soluImg2.png"
/>
}
>
<Meta
title="模块"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean"
/>
<div className='cardLIst'>
<Card hoverable style={{ width: 240 }} cover={<img alt='example' src='http://52.83.169.190:3003/images/soluImg2.png' />}>
<Meta title='模块' description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean' />
</Card>
<Card
hoverable
style={{ width: 240 }}
cover={
<img
alt="example"
src="http://52.83.169.190:3003/images/soluImg2.png"
/>
}
>
<Meta
title="模块"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean"
/>
<Card hoverable style={{ width: 240 }} cover={<img alt='example' src='http://52.83.169.190:3003/images/soluImg2.png' />}>
<Meta title='模块' description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean' />
</Card>
<Card
hoverable
style={{ width: 240 }}
cover={
<img
alt="example"
src="http://52.83.169.190:3003/images/soluImg2.png"
/>
}
>
<Meta
title="模块"
description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean"
/>
<Card hoverable style={{ width: 240 }} cover={<img alt='example' src='http://52.83.169.190:3003/images/soluImg2.png' />}>
<Meta title='模块' description='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean' />
</Card>
</div>
</div>
);
......
src/routes/Index/index.js
import React from 'react'
import {Layout} from 'antd'
import SiderNav from '../../components/SiderNav'
import ContentMain from '../../components/ContentMain'
import HeaderBar from '../../components/HeaderBar'
import React from 'react';
import { Layout } from 'antd';
import SiderNav from '../../components/SiderNav';
import ContentMain from '../../components/ContentMain';
import HeaderBar from '../../components/HeaderBar';
const {Sider, Header, Content, Footer} = Layout
const { Sider, Header, Content, Footer } = Layout;
class Index extends React.Component{
class Index extends React.Component {
state = {
collapsed: false
}
collapsed: false,
};
toggle = () => {
// console.log(this) 状态提升后，到底是谁调用的它
this.setState({
collapsed: !this.state.collapsed
})
}
collapsed: !this.state.collapsed,
});
};
render() {
// 设置Sider的minHeight可以使左右自适应对齐
return (
<div id='page'>
<Layout>
<Sider collapsible
trigger={null}
collapsed={this.state.collapsed}
>
<SiderNav/>
<Sider collapsible trigger={null} collapsed={this.state.collapsed}>
<SiderNav />
</Sider>
<Layout>
<Header style={{background: '#fff', padding: '0 16px'}}>
<HeaderBar collapsed={this.state.collapsed} onToggle={this.toggle}/>
<Header style={{ background: '#fff', padding: '0 16px' }}>
<HeaderBar collapsed={this.state.collapsed} onToggle={this.toggle} />
</Header>
<Content>
<ContentMain/>
<ContentMain />
</Content>
{/* <Footer></Footer> */}
</Layout>
......@@ -43,4 +39,4 @@ class Index extends React.Component{
);
}
}
export default Index
\ No newline at end of file
export default Index;
src/routes/Login/LoginForm.js
......@@ -132,7 +132,7 @@ class LoginForm extends React.Component {
const {focusItem,} = this.state
return (
<div className={this.props.className}>
<h3 className='title'>管理员登录</h3>
<h3 className='title'>管理员登录 </h3>
<Form onSubmit={this.loginSubmit}>
<Form.Item help={getFieldError('userAccount') &&
<PromptBox info={getFieldError('userAccount')} width={calculateWidth(getFieldError('userAccount'))}/>}>
......
src/utils/request.js
// import axios from 'axios';
// axios.defaults.timeout = 15000
// export const request = axios.create({
// baseURL: 'http://52.83.230.236:9001/yszh/1/api/',
// });
import axios from 'axios';
// import { bind } from "file-loader";
axios.defaults.timeout = 15000;
console.log(window.localStorage.getItem('token'));
//设置请求得基准地址
axios.defaults.baseURL = 'http://tcal.atelligence-ai.com/';
const request = axios.create();
//设置请求头
import { getQueryString } from './utils';
import { message } from 'antd';
// document.onkeydown = function() {
// var e = window.event || arguments[0];
// if (e.keyCode == 123) {
// return false;
// } else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
// return false;
// }
// };
// document.oncontextmenu = function() {
// return false;
// };
//禁用F12功能
function disableF12() {
document.onkeydown = function() {
var e = window.event || arguments[0];
if (e.keyCode == 123) {
return false;
} else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
return false;
}
};
//禁用鼠标右键
document.oncontextmenu = function() {
return false;
};
}
// disableF12();
// axios.defaults.headers['content-type'] ='application/json';
// request.interceptors.request.use(config => {
// // 给请求头加token的字段,值为token
//对axios二次封装
// console.log('getQueryString', getQueryString('token'));
// console.log('localStorage', localStorage.getItem('token'));
const token = getQueryString('token') || localStorage.getItem('token');
const request = axios.create({
baseURL: 'http://tcal.atelligence-ai.com/',
timeout: 15000,
headers: {
// 'Content-Type': 'application/json',
accessToken: token,
},
});
// config.headers.accessToken = window.localStorage.getItem('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 {
// message.error('请重新登录');
console.log('token校验没通过 返回登录页');
// window.open('http://localhost:3000/#/login', '_self');
window.open('http://69.235.144.91:3048/#/login', '_self');
}
})
.catch((err) => {
console.log('token校验报错 返回登录页');
// message.error('请重新登录');
window.open('http://69.235.144.91:3048/#/login', '_self');
console.log('err', err);
});
}
checkToken();
// return config
// })
//拦截器
request.interceptors.request.use((config) => {
// alert('拦截器..');
console.log('token---', '拦截器方法校验token');
if (!!token) {
checkToken(config);
} else {
console.log('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/utils.js
......@@ -64,3 +64,17 @@ export function preloadingImages(arr) {
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