fixed:kinase bug修复

.babelrc

 {
 {
-  "presets":["react-app"],
-  "plugins": [
-    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }],
-    ["transform-decorators-legacy"]
-  ]
-}
+  "presets": ["react-app"],
+  "plugins": [["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }], ["transform-decorators-legacy"]]
+}
\ No newline at end of file

.eslintrc.js

+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

+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "experimentalDecorators": true,
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

src/routes/Home/IndicationDetails/index.js

 import React, { Component } from 'react'
 import React, { Component } from 'react'
 import { Pagination,message,Button,Tabs,Spin,Table,Tag,Typography} from 'antd';
 import { Pagination,message,Button,Tabs,Spin,Table,Tag,Typography} from 'antd';
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import './index.css'
 import './index.css'
 import qs from 'qs'
 import qs from 'qs'
 const { Title } = Typography;
 const { Title } = Typography;

src/routes/Home/LigandDetails/index.js

 import React, { Component } from 'react'
 import React, { Component } from 'react'
 import { Card,Tooltip,Popover,message,Radio,Button,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography} from 'antd';
 import { Card,Tooltip,Popover,message,Radio,Button,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography} from 'antd';
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import Molstar from "molstar-react";
 import Molstar from "molstar-react";
 import { Jsme } from 'jsme-react'
 import { Jsme } from 'jsme-react'
 import qs from 'qs'
 import qs from 'qs'

src/routes/Home/MutationDetails/index.js

 import React, { Component } from 'react'
 import React, { Component } from 'react'
 import { Card,Tooltip,Popover,message,Radio,Button,Icon,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography, Dropdown} from 'antd';
 import { Card,Tooltip,Popover,message,Radio,Button,Icon,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography, Dropdown} from 'antd';
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import Molstar from "molstar-react";
 import Molstar from "molstar-react";
 import { Jsme } from 'jsme-react'
 import { Jsme } from 'jsme-react'
 import qs from 'qs'
 import qs from 'qs'

src/routes/Home/SearchDetails/index.js

 import React, { Component } from 'react'
 import React, { Component } from 'react'
 import { Card,Tooltip,message,Button,Tabs,Spin,Table,Tag, Collapse,Divider,Modal,Form,Select,InputNumber,Popover} from 'antd';
 import { Card,Tooltip,message,Button,Tabs,Spin,Table,Tag, Collapse,Divider,Modal,Form,Select,InputNumber,Popover} from 'antd';
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import Molstar from "molstar-react";
 import Molstar from "molstar-react";
 import { Jsme } from 'jsme-react'
 import { Jsme } from 'jsme-react'
 import qs from 'qs'
 import qs from 'qs'

src/routes/Home/SearchList/index.js

 import React, { Component } from 'react'
 import React, { Component } from 'react'
 import { Jsme } from 'jsme-react'
 import { Jsme } from 'jsme-react'
 import { Card,Button,Pagination,Tabs,Spin,message ,Tag} from 'antd';
 import { Card,Button,Pagination,Tabs,Spin,message ,Tag} from 'antd';
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import qs from 'qs'
 import qs from 'qs'
 import './index.css'
 import './index.css'
 const { TabPane } = Tabs;
 const { TabPane } = Tabs;

src/routes/Home/TargetDetails/index.js

 import React, { Component } from 'react'
 import React, { Component } from 'react'
 import { Card,Tooltip,Popover,message,Radio,Button,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography} from 'antd';
 import { Card,Tooltip,Popover,message,Radio,Button,Tabs,Spin,Table,Tag,Input, Collapse,Modal,Form,Select,InputNumber,Typography} from 'antd';
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import Molstar from "molstar-react";
 import Molstar from "molstar-react";
 import { Jsme } from 'jsme-react'
 import { Jsme } from 'jsme-react'
 import qs from 'qs'
 import qs from 'qs'

src/routes/Home/index.js

@@ -3,7 +3,7 @@ import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from
 import LogoTitlte from '../../components/LogoTitlte/index'
 import LogoTitlte from '../../components/LogoTitlte/index'
 import { Jsme } from 'jsme-react'
 import { Jsme } from 'jsme-react'
 import qs from 'qs'
 import qs from 'qs'
-import { request } from '../../utils/request'
+import request from '../../utils/request'
 import './style.css'
 import './style.css'
 const { TabPane } = Tabs;
 const { TabPane } = Tabs;
 const { Option } = Select;
 const { Option } = Select;

src/routes/Kinase/IndicationDetails/index.js

 import React, { Component } from 'react'
 import React, { Component } from 'react'
 import { Pagination, message, Button, Tabs, Spin, Table, Tag, Typography } from 'antd'
 import { Pagination, message, Button, Tabs, Spin, Table, Tag, Typography } from 'antd'
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import './index.css'
 import './index.css'
 import qs from 'qs'
 import qs from 'qs'
 const { Title } = Typography
 const { Title } = Typography
@@ -15,7 +15,7 @@ export default class IndicationDetails extends Component {
   }
   }
   getDetails () {
   getDetails () {
     this.setState({ loading: true })
     this.setState({ loading: true })
-    request.post('/gpcr/indication_search', this.state.smilesData)
+    request.post('/kinase/indication_search', this.state.smilesData)
       .then(res => {
       .then(res => {
         this.setState({ loading: false })
         this.setState({ loading: false })
         if (res.data.code === 200) {
         if (res.data.code === 200) {

src/routes/Kinase/LigandDetails/index.js

@@ -18,7 +18,7 @@ import {
   Menu,
   Menu,
   Dropdown,
   Dropdown,
 } from 'antd'
 } from 'antd'
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import Molstar from 'molstar-react'
 import Molstar from 'molstar-react'
 import { Jsme } from 'jsme-react'
 import { Jsme } from 'jsme-react'
 import qs from 'qs'
 import qs from 'qs'

src/routes/Kinase/SearchDetails/index.js

-import React, { Component } from 'react'
-import {
-  Card,
-  Tooltip,
-  message,
-  Button,
-  Tabs,
-  Spin,
-  Table,
-  Tag,
-  Collapse,
-  Input,
-  Modal,
-  Form,
-  Select,
-  InputNumber,
-  Popover,
-  Pagination,
-  Anchor,
-  Icon,
-  Badge,
-  Menu,
-  Dropdown,
-} from 'antd'
-import WrappedIframe from '../../../components/iframePdb'
-import { request } from '../../../utils/request'
-import Molstar from 'molstar-react'
-import { Jsme } from 'jsme-react'
-import qs from 'qs'
-import './index.css'
-const { Panel } = Collapse
-const { TabPane } = Tabs
-const { Option } = Select
-const { Link } = Anchor
-let id = 0
+import React, { Component } from 'react';
+import { Card, Tooltip, message, Button, Tabs, Spin, Table, Tag, Collapse, Input, Modal, Form, Select, InputNumber, Popover, Pagination, Anchor, Icon, Badge, Menu, Dropdown } from 'antd';
+import WrappedIframe from '../../../components/iframePdb';
+import request from '../../../utils/request';
+import Molstar from 'molstar-react';
+import { Jsme } from 'jsme-react';
+import qs from 'qs';
+import './index.css';
+const { Panel } = Collapse;
+const { TabPane } = Tabs;
+const { Option } = Select;
+const { Link } = Anchor;
+let id = 0;
 
 
 @Form.create()
 @Form.create()
 export default class SearchDetails extends Component {
 export default class SearchDetails extends Component {
@@ -140,48 +118,48 @@ export default class SearchDetails extends Component {
     total_num3: 0,
     total_num3: 0,
     aciveKey: '',
     aciveKey: '',
     directoryState: false,
     directoryState: false,
+  };
+  componentDidMount() {
+    this.getDetails();
   }
   }
-  componentDidMount () {
-    this.getDetails()
-  }
-  getDetails () {
+  getDetails() {
     // this.setState({loading:true})
     // this.setState({loading:true})
-    this.setState({ loading: true })
+    this.setState({ loading: true });
     request
     request
       .post('kinase/drug_detail', qs.parse(this.props.location.search.slice(1)))
       .post('kinase/drug_detail', qs.parse(this.props.location.search.slice(1)))
       .then((res) => {
       .then((res) => {
-        this.setState({ loading: false })
+        this.setState({ loading: false });
         if (res.data.code === 200) {
         if (res.data.code === 200) {
-          let data = res.data.data
-          console.log(data)
+          let data = res.data.data;
+          console.log(data);
           this.setState({
           this.setState({
             DetailsData: data,
             DetailsData: data,
-          })
-          this.setState({ Calculated_propeties: data.Calculated_propeties })
-          this.setState({ Biological_propeties: data.biological_propeties })
+          });
+          this.setState({ Calculated_propeties: data.Calculated_propeties });
+          this.setState({ Biological_propeties: data.biological_propeties });
 
 
-          this.setState({ loading: false })
+          this.setState({ loading: false });
 
 
-          let StructureList = data.Structure
+          let StructureList = data.Structure;
           if (StructureList.length > 0) {
           if (StructureList.length > 0) {
-            this.getStructure(StructureList[0].pdb)
+            this.getStructure(StructureList[0].pdb);
             this.setState({
             this.setState({
               aciveKey: StructureList[0].pdb,
               aciveKey: StructureList[0].pdb,
-            })
+            });
           }
           }
-          this.getBioassayList()
-          this.getTargetList()
-          this.getIndicationList()
+          this.getBioassayList();
+          this.getTargetList();
+          this.getIndicationList();
         } else {
         } else {
-          message.error(res.data.msg)
+          message.error(res.data.msg);
         }
         }
       })
       })
       .catch((err) => {
       .catch((err) => {
-        console.error(err)
-      })
+        console.error(err);
+      });
   }
   }
   getStructure = (e) => {
   getStructure = (e) => {
-    console.log(e)
+    console.log(e);
     request
     request
       .post(
       .post(
         '/search_pdb_data',
         '/search_pdb_data',
@@ -190,373 +168,360 @@ export default class SearchDetails extends Component {
         })
         })
       )
       )
       .then((res) => {
       .then((res) => {
-        this.setState({ loading: false })
+        this.setState({ loading: false });
         if (res.data.code === 200) {
         if (res.data.code === 200) {
-          this.setState({ getStructureList: res.data.data })
-          let listData = this.state.listData
-          listData.pdb_code = res.data.data.name
-          listData.ligand = ''
-          listData.resolution = 0
-          this.setState({ listData })
-
-          let pdbLink =
-            'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
+          this.setState({ getStructureList: res.data.data });
+          let listData = this.state.listData;
+          listData.pdb_code = res.data.data.name;
+          listData.ligand = '';
+          listData.resolution = 0;
+          this.setState({ listData });
+          // debugger;
+          let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
           this.setState({
           this.setState({
             pdbLink,
             pdbLink,
-          })
+          });
         } else {
         } else {
-          message.error(res.data.msg)
+          message.error(res.data.msg);
         }
         }
       })
       })
       .catch((err) => {
       .catch((err) => {
-        console.error(err)
-      })
-  }
+        console.error(err);
+      });
+  };
   ChangeTabs = (e) => {
   ChangeTabs = (e) => {
     this.setState({
     this.setState({
       aciveKey: e,
       aciveKey: e,
-    })
+    });
     this.setState({
     this.setState({
       pdbLink: '',
       pdbLink: '',
-    })
-    let listData = this.state.listData
-    listData.ligand = ''
-    listData.resolution = 0
+    });
+    let listData = this.state.listData;
+    listData.ligand = '';
+    listData.resolution = 0;
     if (listData.pdbList) {
     if (listData.pdbList) {
-      delete listData.pdbList
+      delete listData.pdbList;
     }
     }
     this.setState({
     this.setState({
       listData: listData,
       listData: listData,
       pdbLink: '',
       pdbLink: '',
-    })
-    this.getStructure(e)
-  }
-  getPdid (e) {
-    console.log(e)
-    this.setState({ visible: true })
-    this.setState({ pdbId: e })
+    });
+    this.getStructure(e);
+  };
+  getPdid(e) {
+    console.log(e);
+    this.setState({ visible: true });
+    this.setState({ pdbId: e });
   }
   }
   getTag = (e) => {
   getTag = (e) => {
-    let listData = this.state.listData
-    listData.pdb_code = e
-    listData.ligand = ''
-    listData.resolution = 0
-    this.setState({ listData })
-    let pdbLink2 = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
+    let listData = this.state.listData;
+    listData.pdb_code = e;
+    listData.ligand = '';
+    listData.resolution = 0;
+    this.setState({ listData });
+    let pdbLink2 = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
     this.setState({
     this.setState({
       pdbLink2,
       pdbLink2,
-    })
-    this.setState({ visible: true })
-    this.setState({ pdbId: e })
-  }
+    });
+    this.setState({ visible: true });
+    this.setState({ pdbId: e });
+  };
   getReferences = (e) => {
   getReferences = (e) => {
-    window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`)
-  }
+    window.open(`https://pubmed.ncbi.nlm.nih.gov/${e}`);
+  };
   getReferences2 = (e) => {
   getReferences2 = (e) => {
-    window.open(e)
-  }
+    window.open(e);
+  };
   getList = () => {
   getList = () => {
-    console.log('getList')
+    console.log('getList');
     if (this.state.listData.ligand === '') {
     if (this.state.listData.ligand === '') {
-      message.warning('输入查询条件')
-      return
+      message.warning('输入查询条件');
+      return;
     }
     }
-    JSON.stringify(this.state.listData)
-    let listData = this.state.listData
-    listData.pdbList = this.state.pdbList
-    let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
+    JSON.stringify(this.state.listData);
+    let listData = this.state.listData;
+    listData.pdbList = this.state.pdbList;
+    let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
     this.setState({
     this.setState({
       pdbLink,
       pdbLink,
-    })
-  }
+    });
+  };
   getResolutionData = (e) => {
   getResolutionData = (e) => {
-    let listData = this.state.listData
-    listData.resolution = e
+    let listData = this.state.listData;
+    listData.resolution = e;
     this.setState({
     this.setState({
       listData,
       listData,
-    })
-  }
+    });
+  };
   LigandChange = (e) => {
   LigandChange = (e) => {
-    let listData = this.state.listData
-    listData.ligand = e
+    let listData = this.state.listData;
+    listData.ligand = e;
     this.setState({
     this.setState({
       listData,
       listData,
-    })
-  }
+    });
+  };
 
 
-  callback () { }
-  getOne (e) {
-    console.log(e)
-    const { dataid } = e
+  callback() {}
+  getOne(e) {
+    console.log(e);
+    const { dataid } = e;
     let data = {
     let data = {
       dataid,
       dataid,
-    }
+    };
 
 
     this.props.history.push({
     this.props.history.push({
       pathname: '/kinase/TargetDetails',
       pathname: '/kinase/TargetDetails',
       search: qs.stringify(data),
       search: qs.stringify(data),
-    })
+    });
   }
   }
   getBioassayList = () => {
   getBioassayList = () => {
-    console.log(this.state.dataOne)
-    const { dataid } = this.state.dataOne
-    this.setState({ loading: true })
+    console.log(this.state.dataOne);
+    const { dataid } = this.state.dataOne;
+    this.setState({ loading: true });
     request
     request
       .post('kinase/drug_detail/bioassay', this.state.BioassaySearch)
       .post('kinase/drug_detail/bioassay', this.state.BioassaySearch)
       .then((res) => {
       .then((res) => {
-        this.setState({ loading: false })
+        this.setState({ loading: false });
         if (res) {
         if (res) {
-          console.log(res)
-          let DetailsData = this.state.DetailsData
-          DetailsData.Bioassay = res.data.data
-          this.setState({ total_num2: res.data.total_num })
+          console.log(res);
+          let DetailsData = this.state.DetailsData;
+          DetailsData.Bioassay = res.data.data;
+          this.setState({ total_num2: res.data.total_num });
           this.setState({
           this.setState({
             DetailsData: DetailsData,
             DetailsData: DetailsData,
-          })
+          });
         }
         }
       })
       })
       .catch((err) => {
       .catch((err) => {
-        console.error(err)
-      })
-  }
+        console.error(err);
+      });
+  };
   getTargetList = () => {
   getTargetList = () => {
-    console.log(this.state.dataOne)
-    const { dataid } = this.state.dataOne
-    this.setState({ loading: true })
+    console.log(this.state.dataOne);
+    const { dataid } = this.state.dataOne;
+    this.setState({ loading: true });
     request
     request
       .post('kinase/drug_detail/target', this.state.TargetSearch)
       .post('kinase/drug_detail/target', this.state.TargetSearch)
       .then((res) => {
       .then((res) => {
-        this.setState({ loading: false })
+        this.setState({ loading: false });
         if (res) {
         if (res) {
-          console.log(res)
-          let DetailsData = this.state.DetailsData
-          DetailsData.Target = res.data.data
-          this.setState({ total_num: res.data.total_num })
+          console.log(res);
+          let DetailsData = this.state.DetailsData;
+          DetailsData.Target = res.data.data;
+          this.setState({ total_num: res.data.total_num });
           this.setState({
           this.setState({
             DetailsData: DetailsData,
             DetailsData: DetailsData,
-          })
+          });
         }
         }
       })
       })
       .catch((err) => {
       .catch((err) => {
-        console.error(err)
-      })
-  }
+        console.error(err);
+      });
+  };
   getIndicationList = () => {
   getIndicationList = () => {
-    console.log(this.state.dataOne)
-    const { dataid } = this.state.dataOne
-    this.setState({ loading: true })
+    console.log(this.state.dataOne);
+    const { dataid } = this.state.dataOne;
+    this.setState({ loading: true });
     request
     request
       .post('kinase/drug_detail/indication', this.state.IndicationSearch)
       .post('kinase/drug_detail/indication', this.state.IndicationSearch)
       .then((res) => {
       .then((res) => {
-        this.setState({ loading: false })
+        this.setState({ loading: false });
         if (res) {
         if (res) {
-          console.log(res)
-          let DetailsData = this.state.DetailsData
-          DetailsData.Indication = res.data.data
-          this.setState({ total_num3: res.data.total_num })
+          console.log(res);
+          let DetailsData = this.state.DetailsData;
+          DetailsData.Indication = res.data.data;
+          this.setState({ total_num3: res.data.total_num });
           this.setState({
           this.setState({
             DetailsData: DetailsData,
             DetailsData: DetailsData,
-          })
+          });
         }
         }
       })
       })
       .catch((err) => {
       .catch((err) => {
-        console.error(err)
-      })
-  }
+        console.error(err);
+      });
+  };
   onShowSizeChange = (current, pageSize) => {
   onShowSizeChange = (current, pageSize) => {
-    let BioassaySearch = this.state.BioassaySearch
-    BioassaySearch.page = current
-    BioassaySearch.page_size = pageSize
+    let BioassaySearch = this.state.BioassaySearch;
+    BioassaySearch.page = current;
+    BioassaySearch.page_size = pageSize;
     this.setState({
     this.setState({
       BioassaySearch,
       BioassaySearch,
-    })
-    this.getBioassayList()
-  }
+    });
+    this.getBioassayList();
+  };
   onChange = (current, pageSize) => {
   onChange = (current, pageSize) => {
-    let BioassaySearch = this.state.BioassaySearch
-    BioassaySearch.page = current
-    BioassaySearch.page_size = pageSize
+    let BioassaySearch = this.state.BioassaySearch;
+    BioassaySearch.page = current;
+    BioassaySearch.page_size = pageSize;
     this.setState({
     this.setState({
       BioassaySearch,
       BioassaySearch,
-    })
+    });
 
 
-    this.getBioassayList()
-  }
+    this.getBioassayList();
+  };
   onShowSizeChange2 = (current, pageSize) => {
   onShowSizeChange2 = (current, pageSize) => {
-    console.log(current, pageSize)
-    let TargetSearch = this.state.TargetSearch
-    TargetSearch.page = current
-    TargetSearch.page_size = pageSize
+    console.log(current, pageSize);
+    let TargetSearch = this.state.TargetSearch;
+    TargetSearch.page = current;
+    TargetSearch.page_size = pageSize;
     this.setState({
     this.setState({
       TargetSearch,
       TargetSearch,
-    })
-    this.getTargetList()
-  }
+    });
+    this.getTargetList();
+  };
   onChange2 = (current, pageSize) => {
   onChange2 = (current, pageSize) => {
-    console.log(current, pageSize)
-    let TargetSearch = this.state.TargetSearch
-    TargetSearch.page = current
-    TargetSearch.page_size = pageSize
+    console.log(current, pageSize);
+    let TargetSearch = this.state.TargetSearch;
+    TargetSearch.page = current;
+    TargetSearch.page_size = pageSize;
     this.setState({
     this.setState({
       TargetSearch,
       TargetSearch,
-    })
-    this.getTargetList()
-  }
+    });
+    this.getTargetList();
+  };
   onShowSizeChange3 = (current, pageSize) => {
   onShowSizeChange3 = (current, pageSize) => {
-    console.log(current, pageSize)
-    let IndicationSearch = this.state.IndicationSearch
-    IndicationSearch.page = current
-    IndicationSearch.page_size = pageSize
+    console.log(current, pageSize);
+    let IndicationSearch = this.state.IndicationSearch;
+    IndicationSearch.page = current;
+    IndicationSearch.page_size = pageSize;
     this.setState({
     this.setState({
       IndicationSearch,
       IndicationSearch,
-    })
-    this.getIndicationList()
-  }
+    });
+    this.getIndicationList();
+  };
   onChange3 = (current, pageSize) => {
   onChange3 = (current, pageSize) => {
-    console.log(current, pageSize)
-    let IndicationSearch = this.state.IndicationSearch
-    IndicationSearch.page = current
-    IndicationSearch.page_size = pageSize
+    console.log(current, pageSize);
+    let IndicationSearch = this.state.IndicationSearch;
+    IndicationSearch.page = current;
+    IndicationSearch.page_size = pageSize;
     this.setState({
     this.setState({
       IndicationSearch,
       IndicationSearch,
-    })
-    this.getIndicationList()
-  }
+    });
+    this.getIndicationList();
+  };
   handleAnchorClick = (e) => {
   handleAnchorClick = (e) => {
-    e.preventDefault()
-  }
+    e.preventDefault();
+  };
   getValue = (e) => {
   getValue = (e) => {
-    const { value } = e.target
-    let superpositionData = this.state.superpositionData
-    superpositionData[0].chainID = value
-    this.setState(() => ({ superpositionData: superpositionData }))
-  }
+    const { value } = e.target;
+    let superpositionData = this.state.superpositionData;
+    superpositionData[0].chainID = value;
+    this.setState(() => ({ superpositionData: superpositionData }));
+  };
   SelectValue = (e) => {
   SelectValue = (e) => {
-    console.log(e)
-    let superpositionData = this.state.superpositionData
-    superpositionData[0].pdbID = e
-    this.setState(() => ({ superpositionData: superpositionData }))
-  }
+    console.log(e);
+    let superpositionData = this.state.superpositionData;
+    superpositionData[0].pdbID = e;
+    this.setState(() => ({ superpositionData: superpositionData }));
+  };
   onChangeGroup = (e) => {
   onChangeGroup = (e) => {
-    console.log(e)
+    console.log(e);
     this.setState({
     this.setState({
       pdbList: e,
       pdbList: e,
-    })
-  }
+    });
+  };
   remove = (k) => {
   remove = (k) => {
-    const { form } = this.props
+    const { form } = this.props;
     // can use data-binding to get
     // can use data-binding to get
-    const keys = form.getFieldValue('keys')
+    const keys = form.getFieldValue('keys');
     // We need at least one passenger
     // We need at least one passenger
     if (keys.length === 1) {
     if (keys.length === 1) {
-      return
+      return;
     }
     }
 
 
     this.setState({
     this.setState({
       sum: keys.length - 1,
       sum: keys.length - 1,
-    })
+    });
 
 
     // can use data-binding to set
     // can use data-binding to set
     form.setFieldsValue({
     form.setFieldsValue({
       keys: keys.filter((key) => key !== k),
       keys: keys.filter((key) => key !== k),
-    })
-  }
+    });
+  };
 
 
   add = () => {
   add = () => {
-    const { form } = this.props
+    const { form } = this.props;
     // can use data-binding to get
     // can use data-binding to get
-    const keys = form.getFieldValue('keys')
-    console.log(keys)
-    const nextKeys = keys.concat(id++)
+    const keys = form.getFieldValue('keys');
+    console.log(keys);
+    const nextKeys = keys.concat(id++);
     // can use data-binding to set
     // can use data-binding to set
     // important! notify form to detect changes
     // important! notify form to detect changes
     form.setFieldsValue({
     form.setFieldsValue({
       keys: nextKeys,
       keys: nextKeys,
-    })
+    });
     this.setState({
     this.setState({
       sum: keys.length + 1,
       sum: keys.length + 1,
-    })
-  }
+    });
+  };
 
 
   handleSubmit = (e) => {
   handleSubmit = (e) => {
     // console.log(e);
     // console.log(e);
     // e.preventDefault();
     // e.preventDefault();
     this.props.form.validateFields((err, values) => {
     this.props.form.validateFields((err, values) => {
-      console.log(values)
-      const {
-        keys,
-        pdbList,
-        chainList,
-        methodList,
-        cutoffList,
-        cyclesList,
-      } = values
-      console.log('Received values of form: ', values)
+      console.log(values);
+      const { keys, pdbList, chainList, methodList, cutoffList, cyclesList } = values;
+      console.log('Received values of form: ', values);
       // console.log('Merged values:', keys.map(key => names[key]))
       // console.log('Merged values:', keys.map(key => names[key]))
       // let names = keys.map(key => names[key])
       // let names = keys.map(key => names[key])
 
 
       for (let index = 0; index < pdbList.length; index++) {
       for (let index = 0; index < pdbList.length; index++) {
-        var element = pdbList[index]
+        var element = pdbList[index];
         if (element == undefined) {
         if (element == undefined) {
-          pdbList[index] = ''
+          pdbList[index] = '';
         }
         }
       }
       }
-      let newArr = pdbList.filter((i) => i && i.trim())
+      let newArr = pdbList.filter((i) => i && i.trim());
       for (let index = 0; index < chainList.length; index++) {
       for (let index = 0; index < chainList.length; index++) {
-        var element = chainList[index]
+        var element = chainList[index];
         if (element == undefined) {
         if (element == undefined) {
-          chainList[index] = ''
+          chainList[index] = '';
         }
         }
       }
       }
-      let newArr2 = chainList.filter((i) => i && i.trim())
+      let newArr2 = chainList.filter((i) => i && i.trim());
       for (let index = 0; index < methodList.length; index++) {
       for (let index = 0; index < methodList.length; index++) {
-        var element = methodList[index]
+        var element = methodList[index];
         if (element == undefined) {
         if (element == undefined) {
-          methodList[index] = ''
+          methodList[index] = '';
         }
         }
       }
       }
-      let newArr3 = methodList.filter((i) => i && i.trim())
+      let newArr3 = methodList.filter((i) => i && i.trim());
       for (let index = 0; index < cutoffList.length; index++) {
       for (let index = 0; index < cutoffList.length; index++) {
-        var element = cutoffList[index]
+        var element = cutoffList[index];
         if (element == undefined) {
         if (element == undefined) {
-          cutoffList[index] = ''
+          cutoffList[index] = '';
         }
         }
       }
       }
-      let newArr4 = cutoffList.filter((i) => i && i.trim())
+      let newArr4 = cutoffList.filter((i) => i && i.trim());
       for (let index = 0; index < cyclesList.length; index++) {
       for (let index = 0; index < cyclesList.length; index++) {
-        var element = cyclesList[index]
+        var element = cyclesList[index];
         if (element == undefined) {
         if (element == undefined) {
-          cyclesList[index] = ''
+          cyclesList[index] = '';
         }
         }
       }
       }
-      let newArr5 = cyclesList.filter((i) => i && i.trim())
-      console.log(newArr2)
-      let superpositionData = this.state.superpositionData
-      superpositionData[1].pdbID = newArr[0] === undefined ? '' : newArr[0]
-      superpositionData[1].chainID = newArr2[0] === undefined ? '' : newArr2[0]
-      superpositionData[1].method = newArr3[0] === undefined ? '' : newArr3[0]
-      superpositionData[1].cutoff =
-        newArr4[0] === undefined ? '' : parseInt(newArr4[0])
-      superpositionData[1].cycles =
-        newArr5[0] === undefined ? '' : parseInt(newArr5[0])
-      superpositionData[2].pdbID = newArr[1] === undefined ? '' : newArr[1]
-      superpositionData[2].chainID = newArr2[1] === undefined ? '' : newArr2[1]
-      superpositionData[2].method = newArr3[1] === undefined ? '' : newArr3[1]
-        ; (superpositionData[2].cutoff =
-          newArr4[1] === undefined ? '' : parseInt(newArr4[1])),
-          (superpositionData[2].cycles =
-            newArr5[1] === undefined ? '' : parseInt(newArr5[1]))
-      this.setState(() => ({ superpositionData: superpositionData }))
-      console.log(this.state.superpositionData)
-      let listData = this.state.listData
-      listData.pdbList = this.state.superpositionData
-      let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData)
-      this.setState({ listData })
-      this.setState({ pdbLink })
-      console.log(this.state.pdbLink)
-    })
-  }
-  render () {
+      let newArr5 = cyclesList.filter((i) => i && i.trim());
+      console.log(newArr2);
+      let superpositionData = this.state.superpositionData;
+      superpositionData[1].pdbID = newArr[0] === undefined ? '' : newArr[0];
+      superpositionData[1].chainID = newArr2[0] === undefined ? '' : newArr2[0];
+      superpositionData[1].method = newArr3[0] === undefined ? '' : newArr3[0];
+      superpositionData[1].cutoff = newArr4[0] === undefined ? '' : parseInt(newArr4[0]);
+      superpositionData[1].cycles = newArr5[0] === undefined ? '' : parseInt(newArr5[0]);
+      superpositionData[2].pdbID = newArr[1] === undefined ? '' : newArr[1];
+      superpositionData[2].chainID = newArr2[1] === undefined ? '' : newArr2[1];
+      superpositionData[2].method = newArr3[1] === undefined ? '' : newArr3[1];
+      (superpositionData[2].cutoff = newArr4[1] === undefined ? '' : parseInt(newArr4[1])), (superpositionData[2].cycles = newArr5[1] === undefined ? '' : parseInt(newArr5[1]));
+      this.setState(() => ({ superpositionData: superpositionData }));
+      console.log(this.state.superpositionData);
+      let listData = this.state.listData;
+      listData.pdbList = this.state.superpositionData;
+      let pdbLink = 'http://52.83.169.190:3004/?id=' + JSON.stringify(listData);
+      this.setState({ listData });
+      this.setState({ pdbLink });
+      console.log(this.state.pdbLink);
+    });
+  };
+  render() {
     const {
     const {
       visible,
       visible,
       panelList,
       panelList,
@@ -575,11 +540,11 @@ export default class SearchDetails extends Component {
       addList,
       addList,
       sum,
       sum,
       directoryState,
       directoryState,
-    } = this.state
+    } = this.state;
     const formItemLayout = {
     const formItemLayout = {
       labelCol: { span: 8 },
       labelCol: { span: 8 },
       wrapperCol: { span: 12 },
       wrapperCol: { span: 12 },
-    }
+    };
     const columns = [
     const columns = [
       {
       {
         title: 'Target name',
         title: 'Target name',
@@ -587,29 +552,30 @@ export default class SearchDetails extends Component {
         key: 'Target name',
         key: 'Target name',
         render: (item, record) => (
         render: (item, record) => (
           <Tag
           <Tag
-            color="blue"
+            color='blue'
             onClick={() => {
             onClick={() => {
-              this.getOne(record)
-            }}>
+              this.getOne(record);
+            }}
+          >
             {record.Target_name}
             {record.Target_name}
           </Tag>
           </Tag>
         ),
         ),
       },
       },
-   
+
       {
       {
-        title: "Uniport id",
-        dataIndex: "Uniport_id",
-        key: "Uniport_id",
+        title: 'Uniport id',
+        dataIndex: 'Uniport_id',
+        key: 'Uniport_id',
       },
       },
       {
       {
-        title: "Group",
-        dataIndex: "Group",
-        key: "Group",
+        title: 'Group',
+        dataIndex: 'Group',
+        key: 'Group',
       },
       },
       {
       {
-        title: "Family",
-        dataIndex: "Family",
-        key: "Family",
+        title: 'Family',
+        dataIndex: 'Family',
+        key: 'Family',
       },
       },
       {
       {
         title: 'PDB',
         title: 'PDB',
@@ -619,14 +585,15 @@ export default class SearchDetails extends Component {
             {PDB.map((item, index) => {
             {PDB.map((item, index) => {
               return (
               return (
                 <Tag
                 <Tag
-                  color="blue"
+                  color='blue'
                   key={index}
                   key={index}
                   onClick={() => {
                   onClick={() => {
-                    this.getTag(item)
-                  }}>
+                    this.getTag(item);
+                  }}
+                >
                   {item.toUpperCase()}
                   {item.toUpperCase()}
                 </Tag>
                 </Tag>
-              )
+              );
             })}
             })}
           </span>
           </span>
         ),
         ),
@@ -638,14 +605,14 @@ export default class SearchDetails extends Component {
         render: (sequence) => (
         render: (sequence) => (
           <span>
           <span>
             {
             {
-              <Tooltip placement="topLeft" title={sequence}>
+              <Tooltip placement='topLeft' title={sequence}>
                 <Button>Sequence</Button>
                 <Button>Sequence</Button>
               </Tooltip>
               </Tooltip>
             }
             }
           </span>
           </span>
         ),
         ),
       },
       },
-    ]
+    ];
     const columns2 = [
     const columns2 = [
       {
       {
         title: 'Indication',
         title: 'Indication',
@@ -660,7 +627,7 @@ export default class SearchDetails extends Component {
           <span>
           <span>
             {Synonyms != null &&
             {Synonyms != null &&
               Synonyms.map((item, index) => {
               Synonyms.map((item, index) => {
-                return <span key={index}>{item.toUpperCase()},</span>
+                return <span key={index}>{item.toUpperCase()},</span>;
               })}
               })}
           </span>
           </span>
         ),
         ),
@@ -672,7 +639,7 @@ export default class SearchDetails extends Component {
         render: (Status) => (
         render: (Status) => (
           <span>
           <span>
             {Status.map((item, index) => {
             {Status.map((item, index) => {
-              return <Tag key={index}>{item.toUpperCase()}</Tag>
+              return <Tag key={index}>{item.toUpperCase()}</Tag>;
             })}
             })}
           </span>
           </span>
         ),
         ),
@@ -701,28 +668,29 @@ export default class SearchDetails extends Component {
               reference.map((item, index) => {
               reference.map((item, index) => {
                 return (
                 return (
                   <Tag
                   <Tag
-                    color="blue"
+                    color='blue'
                     key={index}
                     key={index}
                     onClick={() => {
                     onClick={() => {
-                      this.getReferences2(item)
-                    }}>
+                      this.getReferences2(item);
+                    }}
+                  >
                     {item.toUpperCase()}
                     {item.toUpperCase()}
                   </Tag>
                   </Tag>
-                )
+                );
               })}
               })}
           </span>
           </span>
         ),
         ),
       },
       },
-    ]
+    ];
     const menu = (
     const menu = (
       <Menu>
       <Menu>
         <Menu.Item>Action 1</Menu.Item>
         <Menu.Item>Action 1</Menu.Item>
         <Menu.Item>Action 2</Menu.Item>
         <Menu.Item>Action 2</Menu.Item>
       </Menu>
       </Menu>
-    )
+    );
     const expandedRowRender = (e) => {
     const expandedRowRender = (e) => {
-      console.log(e)
-      const { standards } = e
+      console.log(e);
+      const { standards } = e;
       const columns = [
       const columns = [
         {
         {
           title: 'Standard Type',
           title: 'Standard Type',
@@ -752,21 +720,20 @@ export default class SearchDetails extends Component {
             <span>
             <span>
               {
               {
                 <Tag
                 <Tag
-                  color="blue"
+                  color='blue'
                   onClick={() => {
                   onClick={() => {
-                    this.getReferences2(reference)
-                  }}>
+                    this.getReferences2(reference);
+                  }}
+                >
                   {reference}
                   {reference}
                 </Tag>
                 </Tag>
               }
               }
             </span>
             </span>
           ),
           ),
         },
         },
-      ]
-      return (
-        <Table columns={columns} dataSource={standards} pagination={false} />
-      )
-    }
+      ];
+      return <Table columns={columns} dataSource={standards} pagination={false} />;
+    };
 
 
     const columns3 = [
     const columns3 = [
       {
       {
@@ -774,10 +741,11 @@ export default class SearchDetails extends Component {
         dataIndex: 'Target',
         dataIndex: 'Target',
         render: (item, record) => (
         render: (item, record) => (
           <Tag
           <Tag
-            color="blue"
+            color='blue'
             onClick={() => {
             onClick={() => {
-              this.getOne(record)
-            }}>
+              this.getOne(record);
+            }}
+          >
             {record.Target_name}
             {record.Target_name}
           </Tag>
           </Tag>
         ),
         ),
@@ -805,7 +773,7 @@ export default class SearchDetails extends Component {
       //     </span>
       //     </span>
       //   ),
       //   ),
       // },
       // },
-    ]
+    ];
     const columnsChain = [
     const columnsChain = [
       {
       {
         title: 'Chain_name',
         title: 'Chain_name',
@@ -838,14 +806,14 @@ export default class SearchDetails extends Component {
         dataIndex: 'res_end',
         dataIndex: 'res_end',
         key: 'res_end',
         key: 'res_end',
       },
       },
-    ]
-    const { getFieldDecorator, getFieldValue } = this.props.form
+    ];
+    const { getFieldDecorator, getFieldValue } = this.props.form;
     const formItemLayoutWithOutLabel = {
     const formItemLayoutWithOutLabel = {
       wrapperCol: {
       wrapperCol: {
         xs: { span: 24, offset: 0 },
         xs: { span: 24, offset: 0 },
         sm: { span: 20, offset: 4 },
         sm: { span: 20, offset: 4 },
       },
       },
-    }
+    };
     const formItemLayout2 = {
     const formItemLayout2 = {
       labelCol: {
       labelCol: {
         xs: { span: 24 },
         xs: { span: 24 },
@@ -855,15 +823,11 @@ export default class SearchDetails extends Component {
         xs: { span: 24 },
         xs: { span: 24 },
         sm: { span: 20 },
         sm: { span: 20 },
       },
       },
-    }
-    getFieldDecorator('keys', { initialValue: [] })
-    const keys = getFieldValue('keys')
+    };
+    getFieldDecorator('keys', { initialValue: [] });
+    const keys = getFieldValue('keys');
     const formItems = keys.map((k, index) => (
     const formItems = keys.map((k, index) => (
-      <Form.Item
-        {...(index === 0 ? formItemLayout2 : formItemLayoutWithOutLabel)}
-        label={index === 0 ? 'SelectPDB: ' : ''}
-        required={false}
-        key={k}>
+      <Form.Item {...(index === 0 ? formItemLayout2 : formItemLayoutWithOutLabel)} label={index === 0 ? 'SelectPDB: ' : ''} required={false} key={k}>
         <div style={{ display: 'flex ', alignItems: 'center ' }}>
         <div style={{ display: 'flex ', alignItems: 'center ' }}>
           {getFieldDecorator(`pdbList[${k}]`)(
           {getFieldDecorator(`pdbList[${k}]`)(
             <Select style={{ width: '100px' }}>
             <Select style={{ width: '100px' }}>
@@ -872,22 +836,15 @@ export default class SearchDetails extends Component {
                   <Option key={index.pdb} value={item.pdb.toLowerCase()}>
                   <Option key={index.pdb} value={item.pdb.toLowerCase()}>
                     {item.pdb.toLowerCase()}
                     {item.pdb.toLowerCase()}
                   </Option>
                   </Option>
-                )
+                );
               })}
               })}
             </Select>
             </Select>
           )}
           )}
           <div>
           <div>
-            <Form.Item style={{ margin: '0px' }}>
-              {getFieldDecorator(`chainList[${k}]`)(
-                <Input
-                  placeholder="请输入Chain"
-                  style={{ width: '100px', marginRight: 8 }}
-                />
-              )}
-            </Form.Item>
+            <Form.Item style={{ margin: '0px' }}>{getFieldDecorator(`chainList[${k}]`)(<Input placeholder='请输入Chain' style={{ width: '100px', marginRight: 8 }} />)}</Form.Item>
           </div>
           </div>
           <div>
           <div>
-            <Form.Item style={{ margin: '0px' }} help="The information is being validated...">
+            <Form.Item style={{ margin: '0px' }} help='The information is being validated...'>
               {getFieldDecorator(`methodList[${k}]`)(
               {getFieldDecorator(`methodList[${k}]`)(
                 <Select style={{ width: '100px' }}>
                 <Select style={{ width: '100px' }}>
                   {addList.map((item, index) => {
                   {addList.map((item, index) => {
@@ -895,72 +852,41 @@ export default class SearchDetails extends Component {
                       <Option key={index} value={item}>
                       <Option key={index} value={item}>
                         {item}
                         {item}
                       </Option>
                       </Option>
-                    )
+                    );
                   })}
                   })}
                 </Select>
                 </Select>
               )}
               )}
             </Form.Item>
             </Form.Item>
           </div>
           </div>
           <div>
           <div>
-            <Form.Item style={{ margin: '0px' }}>
-              {getFieldDecorator(`cutoffList[${k}]`)(
-                <Input
-                  placeholder="Cutoff"
-                  style={{ width: '100px', marginRight: 8 }}
-                />
-              )}
-            </Form.Item>
+            <Form.Item style={{ margin: '0px' }}>{getFieldDecorator(`cutoffList[${k}]`)(<Input placeholder='Cutoff' style={{ width: '100px', marginRight: 8 }} />)}</Form.Item>
           </div>
           </div>
           <div>
           <div>
             <Form.Item style={{ margin: '0px' }}>
             <Form.Item style={{ margin: '0px' }}>
-              {getFieldDecorator(`cyclesList[${k}]`)(
-                <Input
-                  placeholder="Cycles"
-                  style={{ width: '100px', marginRight: 8 }}
-                />
-              )}
-              {keys.length > 1 ? (
-                <Icon
-                  className="dynamic-delete-button"
-                  type="minus-circle-o"
-                  onClick={() => this.remove(k)}
-                  style={{ marginLeft: '10px' }}
-                />
-              ) : null}
+              {getFieldDecorator(`cyclesList[${k}]`)(<Input placeholder='Cycles' style={{ width: '100px', marginRight: 8 }} />)}
+              {keys.length > 1 ? <Icon className='dynamic-delete-button' type='minus-circle-o' onClick={() => this.remove(k)} style={{ marginLeft: '10px' }} /> : null}
             </Form.Item>
             </Form.Item>
           </div>
           </div>
         </div>
         </div>
       </Form.Item>
       </Form.Item>
-    ))
+    ));
     return (
     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">
+      <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 file={this.state.fileData} /> */}
             {/* <Molstar file={this.state.fileData} /> */}
-            <iframe
-              src={pdbLink2}
-              height={'500px'}
-              width={'100%'}
-              name="iframe-video"
-            />
+            <iframe src={pdbLink2} height={'500px'} width={'100%'} name='iframe-video' />
           </div>
           </div>
         </Modal>
         </Modal>
-        <Spin tip="Loading..." size="large" spinning={this.state.loading}>
-          <div className="Anchor-div">
+        <Spin tip='Loading...' size='large' spinning={this.state.loading}>
+          <div className='Anchor-div'>
             {directoryState && (
             {directoryState && (
-              <Button type="primary" style={{ width: '100%' }} onClick={() => this.setState({ directoryState: false })}>
+              <Button type='primary' style={{ width: '100%' }} onClick={() => this.setState({ directoryState: false })}>
                 收起目录
                 收起目录
               </Button>
               </Button>
             )}
             )}
             {!directoryState && (
             {!directoryState && (
-              <Button type="primary" style={{ width: '100%' }} onClick={() => this.setState({ directoryState: true })}>
-
+              <Button type='primary' style={{ width: '100%' }} onClick={() => this.setState({ directoryState: true })}>
                 展开目录
                 展开目录
               </Button>
               </Button>
             )}
             )}
@@ -968,143 +894,101 @@ export default class SearchDetails extends Component {
             {directoryState && (
             {directoryState && (
               <div>
               <div>
                 <Anchor onClick={this.handleAnchorClick}>
                 <Anchor onClick={this.handleAnchorClick}>
-                  <Link href="#card" title="Title" />
-                  <Link href="#Indication" title="Indication" />
-                  <Link href="#Target" title="Target" />
-                  <Link
-                    href="#BiologicalPropeties"
-                    title="Biological Propeties"
-                  />
-                  <Link href="#Bioassay" title="Bioassay" />
-                  <Link
-                    href="#CalculatedPropeties"
-                    title="Calculated Propeties"
-                  />
-                  <Link href="#Structure" title="Structure" />
+                  <Link href='#card' title='Title' />
+                  <Link href='#Indication' title='Indication' />
+                  <Link href='#Target' title='Target' />
+                  <Link href='#BiologicalPropeties' title='Biological Propeties' />
+                  <Link href='#Bioassay' title='Bioassay' />
+                  <Link href='#CalculatedPropeties' title='Calculated Propeties' />
+                  <Link href='#Structure' title='Structure' />
                 </Anchor>
                 </Anchor>
               </div>
               </div>
             )}
             )}
           </div>
           </div>
-          <Card hoverable id="card">
+          <Card hoverable id='card'>
             <div>
             <div>
-              <div className="title-div">{name}</div>
-              <div className="title-div-top">
-                <div className="DataList-left">
+              <div className='title-div'>{name}</div>
+              <div className='title-div-top'>
+                <div className='DataList-left'>
                   <div>
                   <div>
-                    <div className="title-div">{DetailsData.name}</div>
-                    <div className="title-div-top">
-                      <div className="DataList-left">
+                    <div className='title-div'>{DetailsData.name}</div>
+                    <div className='title-div-top'>
+                      <div className='DataList-left'>
                         <div>
                         <div>
-                          <div className="div-list">
-                            <div className="list-one">
-                              <div className="left-title">Synonyms</div>
+                          <div className='div-list'>
+                            <div className='list-one'>
+                              <div className='left-title'>Synonyms</div>
 
 
-                              <div className="Synonyms-div">
+                              <div className='Synonyms-div'>
                                 <div> </div>
                                 <div> </div>
                                 {DetailsData.synonyms.map((item, index) => {
                                 {DetailsData.synonyms.map((item, index) => {
-                                  return <Tag>{item}</Tag>
+                                  return <Tag key={index}>{item}</Tag>;
                                 })}
                                 })}
                               </div>
                               </div>
                             </div>
                             </div>
-                            <div className="list-one">
-                              <div className="left-title">Drug Type</div>
+                            <div className='list-one'>
+                              <div className='left-title'>Drug Type</div>
                               <div />
                               <div />
                               {DetailsData.datatype}
                               {DetailsData.datatype}
                             </div>
                             </div>
-                            <div className="list-one">
-                              <div className="left-title">Smiles</div>
+                            <div className='list-one'>
+                              <div className='left-title'>Smiles</div>
                               <div />
                               <div />
                               {DetailsData.smiles}
                               {DetailsData.smiles}
                             </div>
                             </div>
                           </div>
                           </div>
                         </div>
                         </div>
                       </div>
                       </div>
-                      <div className="Jsme-div">
-                        {DetailsData.smiles && (
-                          <Jsme
-                            height="300px"
-                            width="300px"
-                            options="depict,useopenchemlib"
-                            smiles={DetailsData.smiles}
-                          />
-                        )}
-                      </div>
+                      <div className='Jsme-div'>{DetailsData.smiles && <Jsme height='300px' width='300px' options='depict,useopenchemlib' smiles={DetailsData.smiles} />}</div>
                     </div>
                     </div>
                   </div>
                   </div>
                 </div>
                 </div>
               </div>
               </div>
             </div>
             </div>
           </Card>
           </Card>
-          <Collapse
-            defaultActiveKey={['1', '2', '3', '4', '5', '6']}
-            onChange={this.callback}>
-            <Panel header="Indication" id="Indication" key="6">
-              <Table
-                bordered
-                rowKey="dataid"
-                dataSource={DetailsData.Indication}
-                pagination={false}
-                columns={columns2}
-              />
-              <Pagination
-                showSizeChanger
-                onShowSizeChange={this.onShowSizeChange3}
-                onChange={this.onChange3}
-                total={total_num3}
-              />
+          <Collapse defaultActiveKey={['1', '2', '3', '4', '5', '6']} onChange={this.callback}>
+            <Panel header='Indication' id='Indication' key='6'>
+              <Table bordered rowKey='dataid' dataSource={DetailsData.Indication} pagination={false} columns={columns2} />
+              <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange3} onChange={this.onChange3} total={total_num3} />
             </Panel>
             </Panel>
-            <Panel header="Target" key="1" id="Target">
-              <Table
-                bordered
-                rowKey="index"
-                dataSource={DetailsData.Target}
-                pagination={false}
-                columns={columns}
-              />
-              <Pagination
-                showSizeChanger
-                onShowSizeChange={this.onShowSizeChange2}
-                onChange={this.onChange2}
-                total={total_num}
-              />
+            <Panel header='Target' key='1' id='Target'>
+              <Table bordered rowKey='index' dataSource={DetailsData.Target} pagination={false} columns={columns} />
+              <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange2} onChange={this.onChange2} total={total_num} />
             </Panel>
             </Panel>
-            <Panel
-              header="Biological Propeties"
-              id="BiologicalPropeties"
-              key="5">
-              <div className="Calcilated">
-                <div className="div-list">
-                  <div className="list-one">
+            <Panel header='Biological Propeties' id='BiologicalPropeties' key='5'>
+              <div className='Calcilated'>
+                <div className='div-list'>
+                  <div className='list-one'>
                     <div>Absorption:</div>
                     <div>Absorption:</div>
                     <div />
                     <div />
                     {Biological_propeties.absorption}
                     {Biological_propeties.absorption}
                   </div>
                   </div>
-                  <div className="list-one">
+                  <div className='list-one'>
                     <div>Clearance:</div>
                     <div>Clearance:</div>
                     <div />
                     <div />
                     {Biological_propeties.clearance}
                     {Biological_propeties.clearance}
                   </div>
                   </div>
-                  <div className="list-one">
+                  <div className='list-one'>
                     <div>Distribution: </div>
                     <div>Distribution: </div>
                     <div />
                     <div />
                     {Biological_propeties.distribution}
                     {Biological_propeties.distribution}
                   </div>
                   </div>
-                  <div className="list-one">
+                  <div className='list-one'>
                     <div>Elimination:</div>
                     <div>Elimination:</div>
                     <div />
                     <div />
                     {Biological_propeties.elimination}
                     {Biological_propeties.elimination}
                   </div>
                   </div>
-                  <div className="list-one">
+                  <div className='list-one'>
                     <div>Half Life: </div>
                     <div>Half Life: </div>
                     <div />
                     <div />
                     {Biological_propeties.half_life}
                     {Biological_propeties.half_life}
                   </div>
                   </div>
-                  <div className="list-one">
+                  <div className='list-one'>
                     <div>metabolism: </div>
                     <div>metabolism: </div>
                     <div />
                     <div />
                     {Biological_propeties.metabolism}
                     {Biological_propeties.metabolism}
                   </div>
                   </div>
-                  <div className="list-one">
+                  <div className='list-one'>
                     <div>Toxicity: </div>
                     <div>Toxicity: </div>
                     <div />
                     <div />
                     {Biological_propeties.toxicity}
                     {Biological_propeties.toxicity}
@@ -1113,59 +997,44 @@ export default class SearchDetails extends Component {
               </div>
               </div>
             </Panel>
             </Panel>
 
 
-            <Panel header="Bioassay" key="2" id="Bioassay">
-              <Table
-                bordered
-                rowKey="dataid"
-                dataSource={DetailsData.Bioassay}
-                pagination={false}
-                columns={columns3}
-                expandedRowRender={expandedRowRender}
-              />
-              <Pagination
-                showSizeChanger
-                onShowSizeChange={this.onShowSizeChange}
-                onChange={this.onChange}
-                total={total_num2}
-              />
+            <Panel header='Bioassay' key='2' id='Bioassay'>
+              <Table bordered rowKey='dataid' dataSource={DetailsData.Bioassay} pagination={false} columns={columns3} expandedRowRender={expandedRowRender} />
+              <Pagination showSizeChanger onShowSizeChange={this.onShowSizeChange} onChange={this.onChange} total={total_num2} />
             </Panel>
             </Panel>
-            <Panel
-              header="Calculated Propeties"
-              key="3"
-              id="CalculatedPropeties">
+            <Panel header='Calculated Propeties' key='3' id='CalculatedPropeties'>
               <div>
               <div>
-                <div className="Calcilated">
-                  <div className="list-one2">
+                <div className='Calcilated'>
+                  <div className='list-one2'>
                     <div>Molecular weight:</div>
                     <div>Molecular weight:</div>
                     <div />
                     <div />
                     {Calculated_propeties.Molecular_weight}
                     {Calculated_propeties.Molecular_weight}
                   </div>
                   </div>
-                  <div className="list-one2">
+                  <div className='list-one2'>
                     <div>LogP:</div>
                     <div>LogP:</div>
                     <div />
                     <div />
                     {Calculated_propeties.logP}
                     {Calculated_propeties.logP}
                   </div>
                   </div>
-                  <div className="list-one2">
+                  <div className='list-one2'>
                     <div>Hydrogen bond donor: </div>
                     <div>Hydrogen bond donor: </div>
                     <div />
                     <div />
                     {Calculated_propeties.Hydrogen_bond_donor}
                     {Calculated_propeties.Hydrogen_bond_donor}
                   </div>
                   </div>
-                  <div className="list-one2">
+                  <div className='list-one2'>
                     <div>Hydrogen bond acceptor:</div>
                     <div>Hydrogen bond acceptor:</div>
                     <div />
                     <div />
                     {Calculated_propeties.Hydrogen_bond_acceptor}
                     {Calculated_propeties.Hydrogen_bond_acceptor}
                   </div>
                   </div>
-                  <div className="list-one2">
+                  <div className='list-one2'>
                     <div>Rotatable bond: </div>
                     <div>Rotatable bond: </div>
                     <div />
                     <div />
                     {Calculated_propeties.Rotatable_bond}
                     {Calculated_propeties.Rotatable_bond}
                   </div>
                   </div>
-                  <div className="list-one2">
+                  <div className='list-one2'>
                     <div>sp3 Carbon: </div>
                     <div>sp3 Carbon: </div>
                     <div />
                     <div />
                     {Calculated_propeties.sp3_Carbon}
                     {Calculated_propeties.sp3_Carbon}
                   </div>
                   </div>
-                  <div className="list-one2">
+                  <div className='list-one2'>
                     <div>tPSA: </div>
                     <div>tPSA: </div>
                     <div />
                     <div />
                     {Calculated_propeties.tPSA}
                     {Calculated_propeties.tPSA}
@@ -1173,88 +1042,64 @@ export default class SearchDetails extends Component {
                 </div>
                 </div>
               </div>
               </div>
             </Panel>
             </Panel>
-            <Panel header="Structure" key="4" id="Structure">
+            <Panel header='Structure' key='4' id='Structure'>
               <Tabs
               <Tabs
-                defaultActiveKey="0"
+                defaultActiveKey='0'
                 // type="card"
                 // type="card"
                 style={{ height: 1000 }}
                 style={{ height: 1000 }}
-                tabPosition="left"
-                onChange={this.ChangeTabs}>
+                tabPosition='left'
+                onChange={this.ChangeTabs}
+              >
                 {DetailsData.Structure.map((item, index) => {
                 {DetailsData.Structure.map((item, index) => {
                   return (
                   return (
                     <TabPane id={item.pdb} tab={item.pdb} key={item.pdb}>
                     <TabPane id={item.pdb} tab={item.pdb} key={item.pdb}>
-                      <div className="TabPane-center">
-                        <div className="Molstar-div2">
-                          {this.state.aciveKey == item.pdb && (
-                            <WrappedIframe pdbLink={this.state.pdbLink} />
-                          )}
-                        </div>
-                        <div className="Structure-right">
-                          <Form layout="horizontal">
-                            <Form.Item label="详情" {...formItemLayout}>
+                      <div className='TabPane-center'>
+                        <div className='Molstar-div2'>{this.state.aciveKey == item.pdb && <WrappedIframe pdbLink={this.state.pdbLink} />}</div>
+                        <div className='Structure-right'>
+                          <Form layout='horizontal'>
+                            <Form.Item label='详情' {...formItemLayout}>
                               <div>method: {getStructureList.method}</div>
                               <div>method: {getStructureList.method}</div>
                               <div>name: {getStructureList.name}</div>
                               <div>name: {getStructureList.name}</div>
-                              <div>
-                                pdb_datatime: {getStructureList.pdb_datatime}
-                              </div>
-                              <div>
-                                resolution: {getStructureList.resolution}
-                              </div>
+                              <div>pdb_datatime: {getStructureList.pdb_datatime}</div>
+                              <div>resolution: {getStructureList.resolution}</div>
                             </Form.Item>
                             </Form.Item>
-                            <Form.Item label="References " {...formItemLayout}>
+                            <Form.Item label='References ' {...formItemLayout}>
                               {getStructureList.References &&
                               {getStructureList.References &&
-                                getStructureList.References.map(
-                                  (item, index) => {
-                                    return (
-                                      <Button
-                                        type="primary"
-                                        onClick={() => {
-                                          this.getReferences(item)
-                                        }}
-                                        key={index}
-                                        style={{ marginRight: '5px' }}>
-                                        {item}
-                                      </Button>
-                                    )
-                                  }
-                                )}
+                                getStructureList.References.map((item, index) => {
+                                  return (
+                                    <Button
+                                      type='primary'
+                                      onClick={() => {
+                                        this.getReferences(item);
+                                      }}
+                                      key={index}
+                                      style={{ marginRight: '5px' }}
+                                    >
+                                      {item}
+                                    </Button>
+                                  );
+                                })}
                             </Form.Item>
                             </Form.Item>
                           </Form>
                           </Form>
                           <Collapse accordion>
                           <Collapse accordion>
-                            <Panel header="对齐" key="1">
-                              <div className="form-div">
-                                <Form
-                                  onSubmit={this.handleSubmit}
-                                  className="login-form">
-                                  <Form.Item
-                                    label="Ref.PDB"
-                                    {...formItemLayout2}>
+                            <Panel header='对齐' key='1'>
+                              <div className='form-div'>
+                                <Form onSubmit={this.handleSubmit} className='login-form'>
+                                  <Form.Item label='Ref.PDB' {...formItemLayout2}>
                                     <div>
                                     <div>
-                                      <Select
-                                        style={{ width: '100px' }}
-                                        value={
-                                          this.state.superpositionData[0].pdbID
-                                        }
-                                        onChange={this.SelectValue}>
-                                        {DetailsData.Structure.map(
-                                          (item, index) => {
-                                            return (
-                                              <Option
-                                                key={index.pdb}
-                                                value={item.pdb.toLowerCase()}>
-                                                {item.pdb.toLowerCase()}
-                                              </Option>
-                                            )
-                                          }
-                                        )}
+                                      <Select style={{ width: '100px' }} value={this.state.superpositionData[0].pdbID} onChange={this.SelectValue}>
+                                        {DetailsData.Structure.map((item, index) => {
+                                          return (
+                                            <Option key={index.pdb} value={item.pdb.toLowerCase()}>
+                                              {item.pdb.toLowerCase()}
+                                            </Option>
+                                          );
+                                        })}
                                       </Select>
                                       </Select>
                                       <Input
                                       <Input
-                                        placeholder="请输入Chain"
+                                        placeholder='请输入Chain'
                                         onChange={this.getValue}
                                         onChange={this.getValue}
-                                        value={
-                                          this.state.superpositionData[0]
-                                            .chainID
-                                        }
+                                        value={this.state.superpositionData[0].chainID}
                                         style={{
                                         style={{
                                           width: '100px',
                                           width: '100px',
                                         }}
                                         }}
@@ -1264,101 +1109,84 @@ export default class SearchDetails extends Component {
                                   {formItems}
                                   {formItems}
                                   <Form.Item {...formItemLayoutWithOutLabel}>
                                   <Form.Item {...formItemLayoutWithOutLabel}>
                                     {sum < 2 && (
                                     {sum < 2 && (
-                                      <Button
-                                        type="dashed"
-                                        onClick={this.add}
-                                        style={{ width: '60%' }}>
-                                        <Icon type="plus" /> Add field
+                                      <Button type='dashed' onClick={this.add} style={{ width: '60%' }}>
+                                        <Icon type='plus' /> Add field
                                       </Button>
                                       </Button>
                                     )}
                                     )}
                                   </Form.Item>
                                   </Form.Item>
                                   <Form.Item {...formItemLayoutWithOutLabel}>
                                   <Form.Item {...formItemLayoutWithOutLabel}>
-                                    <Button type="primary" htmlType="submit">
+                                    <Button type='primary' htmlType='submit'>
                                       对齐
                                       对齐
                                     </Button>
                                     </Button>
                                   </Form.Item>
                                   </Form.Item>
                                 </Form>
                                 </Form>
                               </div>
                               </div>
                             </Panel>
                             </Panel>
-                            <Panel header="抽取配体" key="2">
-                              <Form layout="horizontal">
-                                <Form.Item label="配体列表" {...formItemLayout}>
+                            <Panel header='抽取配体' key='2'>
+                              <Form layout='horizontal'>
+                                <Form.Item label='配体列表' {...formItemLayout}>
                                   {getStructureList.ligand_up_list &&
                                   {getStructureList.ligand_up_list &&
-                                    getStructureList.ligand_up_list.map(
-                                      (item, index) => {
-                                        return (
-                                          <Popover
-                                            content={
-                                              <div>
-                                                <div
-                                                  key={index}
-                                                  style={{
-                                                    width: '100px',
-                                                    wordWrap: 'break-word',
-                                                    wordBreak: 'normal',
-                                                  }}>
-                                                  {item.comp_name}
-                                                </div>
-
-                                                <Jsme
-                                                  height="100px"
-                                                  width="100px"
-                                                  options="depict,useopenchemlib"
-                                                  smiles={item.smiles}
-                                                />
+                                    getStructureList.ligand_up_list.map((item, index) => {
+                                      return (
+                                        <Popover
+                                          content={
+                                            <div>
+                                              <div
+                                                key={index}
+                                                style={{
+                                                  width: '100px',
+                                                  wordWrap: 'break-word',
+                                                  wordBreak: 'normal',
+                                                }}
+                                              >
+                                                {item.comp_name}
                                               </div>
                                               </div>
-                                            }>
-                                            {
-                                              <Button
-                                                type="primary"
-                                                style={{ marginRight: '5px' }}>
-                                                {item.name}
-                                              </Button>
-                                            }
-                                          </Popover>
-                                        )
-                                      }
-                                    )}
+
+                                              <Jsme height='100px' width='100px' options='depict,useopenchemlib' smiles={item.smiles} />
+                                            </div>
+                                          }
+                                        >
+                                          {
+                                            <Button type='primary' style={{ marginRight: '5px' }}>
+                                              {item.name}
+                                            </Button>
+                                          }
+                                        </Popover>
+                                      );
+                                    })}
                                 </Form.Item>
                                 </Form.Item>
-                                <Form.Item label="配体选择" {...formItemLayout}>
-                                  <Select
-                                    style={{ width: 250 }}
-                                    value={this.state.listData.ligand}
-                                    size="large"
-                                    onChange={this.LigandChange}>
+                                <Form.Item label='配体选择' {...formItemLayout}>
+                                  <Select style={{ width: 250 }} value={this.state.listData.ligand} size='large' onChange={this.LigandChange}>
                                     {getStructureList.ligand_list &&
                                     {getStructureList.ligand_list &&
-                                      getStructureList.ligand_list.map(
-                                        (item, index) => {
-                                          return (
-                                            <Option key={index} value={item}>
-                                              {item}
-                                            </Option>
-                                          )
-                                        }
-                                      )}
+                                      getStructureList.ligand_list.map((item, index) => {
+                                        return (
+                                          <Option key={index} value={item}>
+                                            {item}
+                                          </Option>
+                                        );
+                                      })}
                                   </Select>
                                   </Select>
                                 </Form.Item>
                                 </Form.Item>
-                                <Form.Item label="搜索半径" {...formItemLayout}>
+                                <Form.Item label='搜索半径' {...formItemLayout}>
                                   <InputNumber
                                   <InputNumber
                                     style={{ width: 250 }}
                                     style={{ width: 250 }}
                                     min={getStructureList.resolution}
                                     min={getStructureList.resolution}
                                     max={10}
                                     max={10}
                                     placeholder={'请输入大于resolutiond数字'}
                                     placeholder={'请输入大于resolutiond数字'}
                                     step={0.1}
                                     step={0.1}
-                                    size="large"
+                                    size='large'
                                     onChange={this.getResolutionData}
                                     onChange={this.getResolutionData}
                                   />
                                   />
                                 </Form.Item>
                                 </Form.Item>
-                                <Form.Item label="Search" {...formItemLayout}>
+                                <Form.Item label='Search' {...formItemLayout}>
                                   <Button
                                   <Button
-                                    type="primary"
+                                    type='primary'
                                     style={{ marginLeft: 50, width: 150 }}
                                     style={{ marginLeft: 50, width: 150 }}
-                                    size="large"
+                                    size='large'
                                     loading={this.state.loading}
                                     loading={this.state.loading}
-                                    disabled={
-                                      getStructureList.ligand_list.length === 0
-                                    }
-                                    onClick={this.getList}>
+                                    disabled={getStructureList.ligand_list.length === 0}
+                                    onClick={this.getList}
+                                  >
                                     Search
                                     Search
                                   </Button>
                                   </Button>
                                 </Form.Item>
                                 </Form.Item>
@@ -1367,21 +1195,15 @@ export default class SearchDetails extends Component {
                           </Collapse>
                           </Collapse>
                         </div>
                         </div>
                       </div>
                       </div>
-                      <Table
-                        bordered
-                        rowKey="item"
-                        dataSource={getStructureList.chain}
-                        pagination={false}
-                        columns={columnsChain}
-                      />
+                      <Table bordered rowKey='item' dataSource={getStructureList.chain} pagination={false} columns={columnsChain} />
                     </TabPane>
                     </TabPane>
-                  )
+                  );
                 })}
                 })}
               </Tabs>
               </Tabs>
             </Panel>
             </Panel>
           </Collapse>
           </Collapse>
         </Spin>
         </Spin>
       </div>
       </div>
-    )
+    );
   }
   }
 }
 }

src/routes/Kinase/SearchList/index.js

 import React, { Component } from "react";
 import React, { Component } from "react";
 import { Jsme } from "jsme-react";
 import { Jsme } from "jsme-react";
 import { Card, Button, Pagination, Tabs, Spin, message, Collapse,Tag } from "antd";
 import { Card, Button, Pagination, Tabs, Spin, message, Collapse,Tag } from "antd";
-import { request } from "../../../utils/request";
+import request from "../../../utils/request";
 import qs from "qs";
 import qs from "qs";
 import "./index.css";
 import "./index.css";
 const { TabPane } = Tabs;
 const { TabPane } = Tabs;

src/routes/Kinase/TargetDetails/index.js

@@ -22,7 +22,7 @@ import {
   Pagination,
   Pagination,
 } from 'antd'
 } from 'antd'
 import WrappedIframe from '../../../components/iframePdb'
 import WrappedIframe from '../../../components/iframePdb'
-import { request } from '../../../utils/request'
+import request from '../../../utils/request'
 import Molstar from 'molstar-react'
 import Molstar from 'molstar-react'
 import { Jsme } from 'jsme-react'
 import { Jsme } from 'jsme-react'
 import qs from 'qs'
 import qs from 'qs'
@@ -1178,7 +1178,7 @@ export default class TargetDetails extends Component {
               {targetsDetail.Structure.map((item, index) => {
               {targetsDetail.Structure.map((item, index) => {
                 return (
                 return (
                   <Option key={index.pdb} value={item.pdb.toLowerCase()}>
                   <Option key={index.pdb} value={item.pdb.toLowerCase()}>
-                    {item.pdb.toLowerCase()}
+                    {item.pdb&&item.pdb.toLowerCase()}
                   </Option>
                   </Option>
                 )
                 )
               })}
               })}
@@ -1537,7 +1537,7 @@ export default class TargetDetails extends Component {
                                               <Option
                                               <Option
                                                 key={index}
                                                 key={index}
                                                 value={item.pdb.toLowerCase()}>
                                                 value={item.pdb.toLowerCase()}>
-                                                {item.pdb.toLowerCase()}
+                                                {item.pdb&&item.pdb.toLowerCase()}
                                               </Option>
                                               </Option>
                                             )
                                             )
                                           }
                                           }

src/routes/Kinase/index.js

-import React from 'react'
-import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from 'antd';
-import LogoTitlte from '../../components/LogoTitlte/index'
-import { Jsme } from 'jsme-react'
-import qs from 'qs'
-import { request } from '../../utils/request'
-import './style.css'
+import React from 'react';
+import { Form, Input, Button, Select, Tabs, message, Radio, Checkbox, Row, Col } from 'antd';
+import LogoTitlte from '../../components/LogoTitlte/index';
+import { Jsme } from 'jsme-react';
+import qs from 'qs';
+import request from '../../utils/request';
+import './style.css';
 const { TabPane } = Tabs;
 const { TabPane } = Tabs;
 const { Option } = Select;
 const { Option } = Select;
 class Home extends React.Component {
 class Home extends React.Component {
   state = {
   state = {
-    select_db:'Ligands',
-    data:'',
+    select_db: 'Ligands',
+    data: '',
     page: 1,
     page: 1,
     page_size: 10,
     page_size: 10,
-    data_type:'smile',
-    target_class:'',
+    data_type: 'smile',
+    target_class: '',
     // target_families:'',
     // target_families:'',
     searchData: {
     searchData: {
       name: 'Drug',
       name: 'Drug',
@@ -22,14 +22,14 @@ class Home extends React.Component {
       pdb_status: 0,
       pdb_status: 0,
       page: 1,
       page: 1,
       page_size: 10,
       page_size: 10,
-      finger: 0
+      finger: 0,
     },
     },
 
 
     TargetSearchData: {
     TargetSearchData: {
       name: 'Target',
       name: 'Target',
       target_class: '',
       target_class: '',
       target_data: '',
       target_data: '',
-      target_family:'',
+      target_family: '',
       pdb_status: 0,
       pdb_status: 0,
       page: 1,
       page: 1,
       page_size: 10,
       page_size: 10,
@@ -39,520 +39,479 @@ class Home extends React.Component {
       name: 'Ligand',
       name: 'Ligand',
       page: 1,
       page: 1,
       page_size: 10,
       page_size: 10,
-      finger: 0
+      finger: 0,
     },
     },
-IndicationSearchData:{
-  name:'Indication',
-  indication:'',
-  page: 1,
-  page_size: 10
-  
-
-},
-MutationSearchData:{
-  name:'Mutation',
-  chembl_id:'',
-  target_class :'All Class',
-  target_data:'',
-  target_families:'' ,
-  idselect_data:[],
-  page: 1,
-  page_size: 10
-
-},
-    disabled:true,
-    loading:false,
-    SelectList:[],
-    draw:false,
-    classList:[],
-    classData:'All Class',
-    allClassList:{},
-    childClassList :[],
-    TargetClassList:[],
-    TargetAllClassList:[],
-    TargetChildClassList:[],
-    compoundList:[
-      'DrugName',
-      'Smiles'
-      
-    ],
-    targetList:[
-      'TargetName',
-      'UniprotId'
-    ],
-    optionsList:[
-      { label: '查询drug相关靶点', value: 1 },
-  { label: '查询ligand相关靶点', value: 2,disabled: false, },
-  { label: '是否有PDB结构', value: 3 },
-    ]
-}
-// Mutation
-CheckChange=(e)=>{
-  console.log(e);
-  let MutationSearchData = this.state.MutationSearchData;
-  MutationSearchData.idselect_data=e
-  this.setState(()=>({MutationSearchData:MutationSearchData}))
-
-}
-onAllChange=(e)=>{
-  if (e.target.checked) {
-    let MutationSearchData = this.state.MutationSearchData;
-    let all_idselect_data=["TM1", "TM4", "TM7", "ICL3", "ECL3", "N-Term", "ECL1", "ICL1", "TM5", "TM2","TM3", "TM6", "ICL2", "ECL2", "C-Term"]
-    MutationSearchData.idselect_data=all_idselect_data
-    this.setState(()=>({MutationSearchData:MutationSearchData }))
-  }else{
+    IndicationSearchData: {
+      name: 'Indication',
+      indication: '',
+      page: 1,
+      page_size: 10,
+    },
+    MutationSearchData: {
+      name: 'Mutation',
+      chembl_id: '',
+      target_class: 'All Class',
+      target_data: '',
+      target_families: '',
+      idselect_data: [],
+      page: 1,
+      page_size: 10,
+    },
+    disabled: true,
+    loading: false,
+    SelectList: [],
+    draw: false,
+    classList: [],
+    classData: 'All Class',
+    allClassList: {},
+    childClassList: [],
+    TargetClassList: [],
+    TargetAllClassList: [],
+    TargetChildClassList: [],
+    compoundList: ['DrugName', 'Smiles'],
+    targetList: ['TargetName', 'UniprotId'],
+    optionsList: [{ label: '查询drug相关靶点', value: 1 }, { label: '查询ligand相关靶点', value: 2, disabled: false }, { label: '是否有PDB结构', value: 3 }],
+  };
+  // Mutation
+  CheckChange = (e) => {
+    console.log(e);
     let MutationSearchData = this.state.MutationSearchData;
     let MutationSearchData = this.state.MutationSearchData;
-    let all_idselect_data=[]
-    MutationSearchData.idselect_data=all_idselect_data
-    this.setState(()=>({MutationSearchData:MutationSearchData }))
-
-  }
-
- 
-
-}
-getMutationList=()=>{
-  let data=   JSON.parse(JSON.stringify(this.state.MutationSearchData))
-  data.idselect_data= data.idselect_data.toString()
-  this.setState(()=>({loading:true }))
-  request.post('/mutation_search', qs.stringify(data) )
-  .then(res => {
-    this.setState(()=>({loading:false }))
-    if (res.data.code===200) {
-      console.log(data);
-      this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data)})
-    }else{
-      message.error(res.data.msg);
+    MutationSearchData.idselect_data = e;
+    this.setState(() => ({ MutationSearchData: MutationSearchData }));
+  };
+  onAllChange = (e) => {
+    if (e.target.checked) {
+      let MutationSearchData = this.state.MutationSearchData;
+      let all_idselect_data = ['TM1', 'TM4', 'TM7', 'ICL3', 'ECL3', 'N-Term', 'ECL1', 'ICL1', 'TM5', 'TM2', 'TM3', 'TM6', 'ICL2', 'ECL2', 'C-Term'];
+      MutationSearchData.idselect_data = all_idselect_data;
+      this.setState(() => ({ MutationSearchData: MutationSearchData }));
+    } else {
+      let MutationSearchData = this.state.MutationSearchData;
+      let all_idselect_data = [];
+      MutationSearchData.idselect_data = all_idselect_data;
+      this.setState(() => ({ MutationSearchData: MutationSearchData }));
     }
     }
-  })
-  .catch(err => {
-    console.error(err); 
-  })
-}
-childClassChange3=(e)=>{
-  console.log(e);
-  let MutationSearchData = this.state.MutationSearchData;
-  MutationSearchData.target_families=e
-  this.setState(()=>({MutationSearchData:MutationSearchData }))
-
-}
-getClassData3=(e)=>{
-  console.log(e);
-  this.setState(()=>({classData:e }))
-  let MutationSearchData = this.state.MutationSearchData;
-  MutationSearchData.target_class=e
-  this.setState(()=>({MutationSearchData:MutationSearchData }))
-  let value =this.state.allClassList
-  let childData=value[e]
-  console.log(childData);
-  this.setState(()=>({childClassList:childData}))
- 
-}
-getMutationValue=(e)=>{
-  const { value } = e.target;
-  let MutationSearchData = this.state.MutationSearchData;
-  MutationSearchData.target_data=value
-  this.setState(()=>({MutationSearchData:MutationSearchData }))
-  
-}
-getChemblValue=(e)=>{
-  const { value } = e.target;
-  let MutationSearchData = this.state.MutationSearchData;
-  MutationSearchData.chembl_id=value
-  this.setState(()=>({MutationSearchData:MutationSearchData }))
-  
-}
-// Indication
-
-getIndicationValue=(e)=>{
-  const { value } = e.target;
-  let IndicationSearchData = this.state.IndicationSearchData;
-  IndicationSearchData.indication=value
-  this.setState(()=>({IndicationSearchData:IndicationSearchData }))
-  
-}
-getIndicationList=()=>{
-  let data=this.state.IndicationSearchData
-  if (data.indication == '') {
-    return message.warning('请输入查询条件！')
-  }
-  this.setState(()=>({loading:true }))
-  request.post('/kinase/indication_search', data )
-  .then(res => {
-    this.setState(()=>({loading:false }))
-    if (res.data.code===200) {
-      this.props.history.push({ pathname: '/Kinase/IndicationDetails', search: qs.stringify(data)})
-    }else{
-      message.error(res.data.msg);
-    }
-  })
-  .catch(err => {
-    console.error(err); 
-  })
-}
-
-// ligend
-getLigendValue=(e)=>{
-  const { value } = e.target;
-  let ligandSearchData = this.state.ligandSearchData;
-  ligandSearchData.ligand_data=value
-  this.setState(()=>({ligandSearchData:ligandSearchData }))
-  
-}
+  };
+  getMutationList = () => {
+    let data = JSON.parse(JSON.stringify(this.state.MutationSearchData));
+    data.idselect_data = data.idselect_data.toString();
+    this.setState(() => ({ loading: true }));
+    request
+      .post('/mutation_search', qs.stringify(data))
+      .then((res) => {
+        this.setState(() => ({ loading: false }));
+        if (res.data.code === 200) {
+          console.log(data);
+          this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data) });
+        } else {
+          message.error(res.data.msg);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+  childClassChange3 = (e) => {
+    console.log(e);
+    let MutationSearchData = this.state.MutationSearchData;
+    MutationSearchData.target_families = e;
+    this.setState(() => ({ MutationSearchData: MutationSearchData }));
+  };
+  getClassData3 = (e) => {
+    console.log(e);
+    this.setState(() => ({ classData: e }));
+    let MutationSearchData = this.state.MutationSearchData;
+    MutationSearchData.target_class = e;
+    this.setState(() => ({ MutationSearchData: MutationSearchData }));
+    let value = this.state.allClassList;
+    let childData = value[e];
+    console.log(childData);
+    this.setState(() => ({ childClassList: childData }));
+  };
+  getMutationValue = (e) => {
+    const { value } = e.target;
+    let MutationSearchData = this.state.MutationSearchData;
+    MutationSearchData.target_data = value;
+    this.setState(() => ({ MutationSearchData: MutationSearchData }));
+  };
+  getChemblValue = (e) => {
+    const { value } = e.target;
+    let MutationSearchData = this.state.MutationSearchData;
+    MutationSearchData.chembl_id = value;
+    this.setState(() => ({ MutationSearchData: MutationSearchData }));
+  };
+  // Indication
 
 
-logSmiles2=(e)=>{
-  let ligandSearchData = this.state.ligandSearchData;
-  ligandSearchData.ligand_data =e
-  this.setState(()=>({ligandSearchData:ligandSearchData }))
-  // this.setState(()=>({data:e }))
-}
-getLigendList=()=>{
-  let data=this.state.ligandSearchData
-  if (data.ligand_data == '') {
-    return message.warning('请输入查询条件！')
-  }
-  this.setState(()=>({loading:true }))
-  request.post('/kinase/ligand_search', data )
-  .then(res => {
-    console.log(res)
-    this.setState(()=>({loading:false }))
-    if (res.data.code===200) {
-      this.props.history.push({ pathname: '/Kinase/SearchList', search: qs.stringify(data)})
-    }else{
-      message.error(res.data.msg);
+  getIndicationValue = (e) => {
+    const { value } = e.target;
+    let IndicationSearchData = this.state.IndicationSearchData;
+    IndicationSearchData.indication = value;
+    this.setState(() => ({ IndicationSearchData: IndicationSearchData }));
+  };
+  getIndicationList = () => {
+    let data = this.state.IndicationSearchData;
+    if (data.indication == '') {
+      return message.warning('请输入查询条件！');
     }
     }
-  })
-  .catch(err => {
-    console.error(err); 
-  })
-}
-getLigandData=(e)=>{
-  const { value } = e.target;
-  let ligandSearchData = this.state.ligandSearchData;
-  ligandSearchData.target_data=value
-  this.setState(()=>({ligandSearchData:ligandSearchData }))
-  
-}
-ligandChange=(e)=>{
-  let ligandSearchData = this.state.ligandSearchData;
-  ligandSearchData.target_type =e
-  this.setState(()=>({ligandSearchData:ligandSearchData }))
-
-}
-childClassChange2=(e)=>{
-  console.log(e);
-  let ligandSearchData = this.state.ligandSearchData;
-  ligandSearchData.target_families=e
-  this.setState(()=>({ligandSearchData:ligandSearchData }))
-
-}
-getClassData2=(e)=>{
-  console.log(e);
-  this.setState(()=>({classData:e }))
-  let ligandSearchData = this.state.ligandSearchData;
-  ligandSearchData.target_class=e
-  this.setState(()=>({ligandSearchData:ligandSearchData }))
-  let value =this.state.allClassList
-  let childData=value[e]
-  console.log(childData);
-  this.setState(()=>({childClassList:childData}))
- 
-}
-// Target
-getTargetClassData=(e)=>{
- 
-  this.setState(()=>({classData:e }))
-  let TargetSearchData = this.state.TargetSearchData;
-  TargetSearchData.target_family=''
-  this.setState(()=>({TargetSearchData:TargetSearchData }))
-  TargetSearchData.target_class=e
-  this.setState(()=>({TargetSearchData:TargetSearchData }))
-  let value =this.state.TargetClassList
-  value.map((item)=>{
-    if (item.name===e) {
-      this.setState(()=>({TargetChildClassList:item.content}))
+    this.setState(() => ({ loading: true }));
+    request
+      .post('/kinase/indication_search', data)
+      .then((res) => {
+        this.setState(() => ({ loading: false }));
+        if (res.data.code === 200) {
+          this.props.history.push({ pathname: '/Kinase/IndicationDetails', search: qs.stringify(data) });
+        } else {
+          message.error(res.data.msg);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  // ligend
+  getLigendValue = (e) => {
+    const { value } = e.target;
+    let ligandSearchData = this.state.ligandSearchData;
+    ligandSearchData.ligand_data = value;
+    this.setState(() => ({ ligandSearchData: ligandSearchData }));
+  };
+
+  logSmiles2 = (e) => {
+    let ligandSearchData = this.state.ligandSearchData;
+    ligandSearchData.ligand_data = e;
+    this.setState(() => ({ ligandSearchData: ligandSearchData }));
+    // this.setState(()=>({data:e }))
+  };
+  getLigendList = () => {
+    let data = this.state.ligandSearchData;
+    if (data.ligand_data == '') {
+      return message.warning('请输入查询条件！');
     }
     }
+    this.setState(() => ({ loading: true }));
+    request
+      .post('/kinase/ligand_search', data)
+      .then((res) => {
+        console.log(res);
+        this.setState(() => ({ loading: false }));
+        if (res.data.code === 200) {
+          this.props.history.push({ pathname: '/Kinase/SearchList', search: qs.stringify(data) });
+        } else {
+          message.error(res.data.msg);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+  getLigandData = (e) => {
+    const { value } = e.target;
+    let ligandSearchData = this.state.ligandSearchData;
+    ligandSearchData.target_data = value;
+    this.setState(() => ({ ligandSearchData: ligandSearchData }));
+  };
+  ligandChange = (e) => {
+    let ligandSearchData = this.state.ligandSearchData;
+    ligandSearchData.target_type = e;
+    this.setState(() => ({ ligandSearchData: ligandSearchData }));
+  };
+  childClassChange2 = (e) => {
+    console.log(e);
+    let ligandSearchData = this.state.ligandSearchData;
+    ligandSearchData.target_families = e;
+    this.setState(() => ({ ligandSearchData: ligandSearchData }));
+  };
+  getClassData2 = (e) => {
+    console.log(e);
+    this.setState(() => ({ classData: e }));
+    let ligandSearchData = this.state.ligandSearchData;
+    ligandSearchData.target_class = e;
+    this.setState(() => ({ ligandSearchData: ligandSearchData }));
+    let value = this.state.allClassList;
+    let childData = value[e];
+    console.log(childData);
+    this.setState(() => ({ childClassList: childData }));
+  };
+  // Target
+  getTargetClassData = (e) => {
+    this.setState(() => ({ classData: e }));
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.target_family = '';
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+    TargetSearchData.target_class = e;
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+    let value = this.state.TargetClassList;
+    value.map((item) => {
+      if (item.name === e) {
+        this.setState(() => ({ TargetChildClassList: item.content }));
+      }
+    });
 
 
-  })
-  
-  
-  // let childData=value[e]
-  // console.log(childData);
-  // this.setState(()=>({childClassList:childData}))
- 
-}
-
-childTargetClassChange=(e)=>{
-  console.log(e);
-  let TargetSearchData = this.state.TargetSearchData;
-  TargetSearchData.target_family=e
-  this.setState(()=>({TargetSearchData:TargetSearchData }))
-
-}
-targetChange=(e)=>{
-  let TargetSearchData = this.state.TargetSearchData;
-  TargetSearchData.target_type =e
-  this.setState(()=>({TargetSearchData:TargetSearchData }))
+    // let childData=value[e]
+    // console.log(childData);
+    // this.setState(()=>({childClassList:childData}))
+  };
 
 
-}
-getindTargetication=(e)=>{
-  const { value } = e.target;
-  let TargetSearchData = this.state.TargetSearchData;
-  TargetSearchData.indication=value
-  this.setState(()=>({TargetSearchData:TargetSearchData }))
-  
-}
-getTargetData2=(e)=>{
-  const { value } = e.target;
-  let TargetSearchData = this.state.TargetSearchData;
-  TargetSearchData.target_data=value
-  this.setState(()=>({TargetSearchData:TargetSearchData }))
-  
-}
-get_drug_name=(e)=>{
-  const { value } = e.target;
-  let TargetSearchData = this.state.TargetSearchData;
-  TargetSearchData.drug_name=value
-  this.setState(()=>({TargetSearchData:TargetSearchData }))
-  
-}
-getTargetList=()=>{
-  let data=this.state.TargetSearchData
-  if (data.target_class == '' && data.target_data == '') {
-    return message.warning('请输入查询条件！')
-  }
-  this.setState(()=>({loading:true }))
-  request.post('/kinase/targets_search', data )
-  .then(res => {
-    console.log(res)
-    this.setState(()=>({loading:false }))
-    if (res.data.code===200) {
-      this.props.history.push({ pathname: '/Kinase/SearchList', search: qs.stringify(data)})
-    }else{
-      message.error(res.data.msg);
+  childTargetClassChange = (e) => {
+    console.log(e);
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.target_family = e;
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+  };
+  targetChange = (e) => {
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.target_type = e;
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+  };
+  getindTargetication = (e) => {
+    const { value } = e.target;
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.indication = value;
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+  };
+  getTargetData2 = (e) => {
+    const { value } = e.target;
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.target_data = value;
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+  };
+  get_drug_name = (e) => {
+    const { value } = e.target;
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.drug_name = value;
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+  };
+  getTargetList = () => {
+    let data = this.state.TargetSearchData;
+    if (data.target_class == '' && data.target_data == '') {
+      return message.warning('请输入查询条件！');
     }
     }
-  })
-  .catch(err => {
-    console.error(err); 
-  })
-}
-
-onChangeCheckbox=(e)=>{
-  console.log(e);
-  let TargetSearchData = this.state.TargetSearchData;
-  TargetSearchData.select_status=e
-  this.setState(()=>({TargetSearchData:TargetSearchData}))
-  console.log(this.state.TargetSearchData);
-}
-  handleChange=(e)=>{
+    this.setState(() => ({ loading: true }));
+    request
+      .post('/kinase/targets_search', data)
+      .then((res) => {
+        console.log(res);
+        this.setState(() => ({ loading: false }));
+        if (res.data.code === 200) {
+          this.props.history.push({ pathname: '/Kinase/SearchList', search: qs.stringify(data) });
+        } else {
+          message.error(res.data.msg);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+
+  onChangeCheckbox = (e) => {
+    console.log(e);
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.select_status = e;
+    this.setState(() => ({ TargetSearchData: TargetSearchData }));
+    console.log(this.state.TargetSearchData);
+  };
+  handleChange = (e) => {
     console.log(e);
     console.log(e);
-    this.setState(()=>({select_db:e }))
-    if (e!='Ligands') {
-      this.setState(()=>({data:'' }))
+    this.setState(() => ({ select_db: e }));
+    if (e != 'Ligands') {
+      this.setState(() => ({ data: '' }));
     }
     }
-  }
-  childClassChange=(e)=>{
+  };
+  childClassChange = (e) => {
     console.log(e);
     console.log(e);
     let searchData = this.state.searchData;
     let searchData = this.state.searchData;
-    searchData.target_families=e
-    this.setState(()=>({searchData:searchData }))
-
-  }
-  getClassData=(e)=>{
+    searchData.target_families = e;
+    this.setState(() => ({ searchData: searchData }));
+  };
+  getClassData = (e) => {
     console.log(e);
     console.log(e);
-    this.setState(()=>({classData:e }))
+    this.setState(() => ({ classData: e }));
     let searchData = this.state.searchData;
     let searchData = this.state.searchData;
-    searchData.target_class=e
-    this.setState(()=>({searchData:searchData }))
+    searchData.target_class = e;
+    this.setState(() => ({ searchData: searchData }));
     console.log(this.state.searchData);
     console.log(this.state.searchData);
-    let value =this.state.allClassList
-    let childData=value[e]
+    let value = this.state.allClassList;
+    let childData = value[e];
     console.log(childData);
     console.log(childData);
-    this.setState(()=>({childClassList:childData}))
-   
-  }
-  targetChange=(e)=>{
+    this.setState(() => ({ childClassList: childData }));
+  };
+  targetChange = (e) => {
     let searchData = this.state.searchData;
     let searchData = this.state.searchData;
-    searchData.target_type =e
-    this.setState(()=>({searchData:searchData }))
-
-  }
-  logSmiles=(e)=>{
+    searchData.target_type = e;
+    this.setState(() => ({ searchData: searchData }));
+  };
+  logSmiles = (e) => {
     let searchData = this.state.searchData;
     let searchData = this.state.searchData;
-    searchData.drugs_data =e
-    this.setState(()=>({searchData:searchData }))
+    searchData.drugs_data = e;
+    this.setState(() => ({ searchData: searchData }));
     // this.setState(()=>({data:e }))
     // this.setState(()=>({data:e }))
-  }
-  componentDidMount(){
+  };
+  componentDidMount() {
     // this.getList()
     // this.getList()
     // this.getSelectList()
     // this.getSelectList()
-    this.getTargetSelectList()
+    this.getTargetSelectList();
   }
   }
-  getSelectList=()=>{
-    request.get('/kinase/target_class/drug')
-    .then(res => {
-      console.log(res)
-      if (res.data.code===200) {
-        console.log(res.data.data);
-        
-        this.setState({
-          classList: Object.keys(res.data.data),
-          allClassList:res.data.data
-          
+  getSelectList = () => {
+    request
+      .get('/kinase/target_class/drug')
+      .then((res) => {
+        console.log(res);
+        if (res.data.code === 200) {
+          console.log(res.data.data);
+
+          this.setState({
+            classList: Object.keys(res.data.data),
+            allClassList: res.data.data,
+          });
+          console.log(this.state);
+        } else {
+          message.error(res.data.msg);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+  getTargetSelectList = () => {
+    // debugger
+    // alert(11);
+    // localStorage.getItem('token') &&
+      request
+        .get('/kinase/target_class/target')
+        .then((res) => {
+          console.log(res);
+          if (res.data.code === 200) {
+            console.log(res.data.data);
+
+            this.setState({
+              TargetClassList: res.data.data,
+              TargetAllClassList: res.data.data,
+            });
+            console.log(this.state);
+          } else {
+            message.error(res.data.msg);
+          }
         })
         })
-        console.log(this.state );
-      }else{
-        message.error(res.data.msg);
-      }
-    })
-    .catch(err => {
-      console.error(err); 
-    })
-
-  }
-  getTargetSelectList=()=>{
-    request.get('/kinase/target_class/target')
-    .then(res => {
-      console.log(res)
-      if (res.data.code===200) {
-        console.log(res.data.data);
-        
-        this.setState({
-          TargetClassList: res.data.data,
-          TargetAllClassList:res.data.data
-          
-        })
-        console.log(this.state );
-      }else{
-        message.error(res.data.msg);
-      }
-    })
-    .catch(err => {
-      console.error(err); 
-    })
-
-  }
-  getValue=(e)=>{
+        .catch((err) => {
+          console.error(err);
+        });
+  };
+  getValue = (e) => {
     const { value } = e.target;
     const { value } = e.target;
     let searchData = this.state.searchData;
     let searchData = this.state.searchData;
-    searchData.drugs_data=value
-    this.setState(()=>({searchData:searchData }))
-    
-  }
-  getindication=(e)=>{
+    searchData.drugs_data = value;
+    this.setState(() => ({ searchData: searchData }));
+  };
+  getindication = (e) => {
     const { value } = e.target;
     const { value } = e.target;
     let searchData = this.state.searchData;
     let searchData = this.state.searchData;
-    searchData.indication=value
-    this.setState(()=>({searchData:searchData }))
-    
-  }
-  getTargetData=(e)=>{
+    searchData.indication = value;
+    this.setState(() => ({ searchData: searchData }));
+  };
+  getTargetData = (e) => {
     const { value } = e.target;
     const { value } = e.target;
     let searchData = this.state.searchData;
     let searchData = this.state.searchData;
-    searchData.target_data=value
-    this.setState(()=>({searchData:searchData }))
-    
-  }
-  
-  onChangeRadio = (e) => {
+    searchData.target_data = value;
+    this.setState(() => ({ searchData: searchData }));
+  };
 
 
-    let value = e.target.value
-    let searchData = this.state.searchData
-    searchData.pdb_status = value
+  onChangeRadio = (e) => {
+    let value = e.target.value;
+    let searchData = this.state.searchData;
+    searchData.pdb_status = value;
     this.setState({
     this.setState({
       searchData: searchData,
       searchData: searchData,
-    })
-  }
+    });
+  };
   onChangeRadio2 = (e) => {
   onChangeRadio2 = (e) => {
-
-    let value = e.target.value
-    let TargetSearchData = this.state.TargetSearchData
-    TargetSearchData.pdb_status = value
+    let value = e.target.value;
+    let TargetSearchData = this.state.TargetSearchData;
+    TargetSearchData.pdb_status = value;
     this.setState({
     this.setState({
       TargetSearchData: TargetSearchData,
       TargetSearchData: TargetSearchData,
-    })
-  }
+    });
+  };
   onChangeRadio3 = (e) => {
   onChangeRadio3 = (e) => {
-    let value = e.target.value
-    let searchData = this.state.searchData
-    searchData.finger = value
+    let value = e.target.value;
+    let searchData = this.state.searchData;
+    searchData.finger = value;
     this.setState({
     this.setState({
       searchData: searchData,
       searchData: searchData,
-    })
-  }
+    });
+  };
   onChangeRadio4 = (e) => {
   onChangeRadio4 = (e) => {
-    let value = e.target.value
-    let ligandSearchData = this.state.ligandSearchData
-    ligandSearchData.finger = value
+    let value = e.target.value;
+    let ligandSearchData = this.state.ligandSearchData;
+    ligandSearchData.finger = value;
     this.setState({
     this.setState({
       ligandSearchData: ligandSearchData,
       ligandSearchData: ligandSearchData,
-    })
-  }
-  getList=()=>{
-    let data=this.state.searchData
-    request.post('/ligand_search', qs.stringify(data) )
-    .then(res => {
-      console.log(res)
-      if (res.data.code===200) {
-        this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data)})
-      }else{
-        message.error(res.data.msg);
-      }
-    })
-    .catch(err => {
-      console.error(err); 
-    })
-  }
-  getDrugsList=()=>{
-    let data=this.state.searchData
+    });
+  };
+  getList = () => {
+    let data = this.state.searchData;
+    request
+      .post('/ligand_search', qs.stringify(data))
+      .then((res) => {
+        console.log(res);
+        if (res.data.code === 200) {
+          this.props.history.push({ pathname: '/home/SearchList', search: qs.stringify(data) });
+        } else {
+          message.error(res.data.msg);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  };
+  getDrugsList = () => {
+    let data = this.state.searchData;
     if (data.drugs_data == '') {
     if (data.drugs_data == '') {
-      return message.warning('请输入查询条件！')
+      return message.warning('请输入查询条件！');
     }
     }
-    this.setState(()=>({loading:true }))
-    request.post('/kinase/drug_search', data )
-    .then(res => {
-      console.log(res)
-      this.setState(()=>({loading:false }))
-      if (res.data.code===200) {
-        this.props.history.push({ pathname: '/kinase/SearchList', search: qs.stringify(data)})
-      }else{
-        message.error(res.data.msg);
-      }
-    })
-    .catch(err => {
-      console.error(err); 
-    })
-  }
-  getDraw=()=>{
-    this.setState(()=>({draw:!this.state.draw }))
-  }
-  compoundChange=(e)=>{
+    this.setState(() => ({ loading: true }));
+    this.props.history.push({ pathname: '/kinase/SearchList', search: qs.stringify(data) });
+    // request
+    //   .post('/kinase/drug_search', data)
+    //   .then((res) => {
+    //     console.log(res);
+    //     this.setState(() => ({ loading: false }));
+    //     if (res.data.code === 200) {
+    //       this.props.history.push({ pathname: '/kinase/SearchList', search: qs.stringify(data) });
+    //     } else {
+    //       message.error(res.data.msg);
+    //     }
+    //   })
+    //   .catch((err) => {
+    //     console.error(err);
+    //   });
+  };
+  getDraw = () => {
+    this.setState(() => ({ draw: !this.state.draw }));
+  };
+  compoundChange = (e) => {
     console.log(e);
     console.log(e);
     let searchData = this.state.searchData;
     let searchData = this.state.searchData;
-    searchData.drugs_type=e
-    this.setState(()=>({searchData:searchData }))
-    console.log(this.state.searchData)
-
-  }
-  callback=(e)=>{
-      console.log(e);
-      let searchData = this.state.searchData;
-      searchData.name=e
-      this.setState(()=>({searchData:searchData }))
-      console.log(this.state.searchData);
-  }
-  getJsme=()=>{
+    searchData.drugs_type = e;
+    this.setState(() => ({ searchData: searchData }));
+    console.log(this.state.searchData);
+  };
+  callback = (e) => {
+    console.log(e);
+    let searchData = this.state.searchData;
+    searchData.name = e;
+    this.setState(() => ({ searchData: searchData }));
+    console.log(this.state.searchData);
+  };
+  getJsme = () => {
     console.log(1);
     console.log(1);
-  }
-
-  
+  };
 
 
   render() {
   render() {
-    const {select_db,data,data_type,optionsList,draw,SelectList,targetList,classList,classData,childClassList,compoundList,TargetClassList,TargetChildClassList}=this.state
-    const formItemLayout ={
+    const { select_db, data, data_type, optionsList, draw, SelectList, targetList, classList, classData, childClassList, compoundList, TargetClassList, TargetChildClassList } = this.state;
+    const formItemLayout = {
       labelCol: { span: 8 },
       labelCol: { span: 8 },
       wrapperCol: { span: 12 },
       wrapperCol: { span: 12 },
-    }
+    };
     const formTailLayout = {
     const formTailLayout = {
       labelCol: { span: 8 },
       labelCol: { span: 8 },
       wrapperCol: { span: 12, offset: 8 },
       wrapperCol: { span: 12, offset: 8 },
@@ -565,79 +524,48 @@ onChangeCheckbox=(e)=>{
       <div className='home'>
       <div className='home'>
         <div className='home-div'>
         <div className='home-div'>
           {/* <LogoTitlte></LogoTitlte> */}
           {/* <LogoTitlte></LogoTitlte> */}
-          <Tabs onChange={this.callback} type="card">
-            <TabPane tab="Drug" key="Drug">
-              <div className="top-div">
+          <Tabs onChange={this.callback} type='card'>
+            <TabPane tab='Drug' key='Drug'>
+              <div className='top-div'>
                 <div>
                 <div>
-                  <Form layout="horizontal">
-                    <Form.Item label="请输入药物名或Smiles" {...formItemLayout}>
-                      <Input
-                        placeholder="请输入化合物"
-                        style={{ width: 250 }}
-                        size="large"
-                        onChange={this.getValue}
-                        value={this.state.searchData.drugs_data}
-                      />
+                  <Form layout='horizontal'>
+                    <Form.Item label='请输入药物名或Smiles' {...formItemLayout}>
+                      <Input placeholder='请输入化合物' style={{ width: 250 }} size='large' onChange={this.getValue} value={this.state.searchData.drugs_data} />
                     </Form.Item>
                     </Form.Item>
-                    <Form.Item label="" {...formTailLayout}>
-                      <Button
-                        type="primary"
-                        style={{ marginRight: '50px' }}
-                        onClick={this.getDraw}>
+                    <Form.Item label='' {...formTailLayout}>
+                      <Button type='primary' style={{ marginRight: '50px' }} onClick={this.getDraw}>
                         画结构
                         画结构
                       </Button>
                       </Button>
-                      <div
-                        className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}
-                      >
-                        <Radio.Group
-                          onChange={this.onChangeRadio3}
-                          value={this.state.searchData.finger}>
+                      <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}>
+                        <Radio.Group onChange={this.onChangeRadio3} value={this.state.searchData.finger}>
                           <Radio value={0}>Substructure</Radio>
                           <Radio value={0}>Substructure</Radio>
                           {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
                           {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
                           <Radio value={1}>Similar Structure</Radio>
                           <Radio value={1}>Similar Structure</Radio>
                         </Radio.Group>
                         </Radio.Group>
                       </div>
                       </div>
 
 
-                      <div
-                        className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}
-                        onClick={this.getJsme}>
-
-                        <Jsme
-                          height="500px"
-                          width="700px"
-                          options="oldlook,star"
-                          onChange={this.logSmiles}
-                        />
+                      <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'} onClick={this.getJsme}>
+                        <Jsme height='500px' width='700px' options='oldlook,star' onChange={this.logSmiles} />
                       </div>
                       </div>
                     </Form.Item>
                     </Form.Item>
-                    <Form.Item label="使用PDB查询" {...formItemLayout}>
-                      <Radio.Group
-                        onChange={this.onChangeRadio}
-                        value={this.state.searchData.pdb_status}>
+                    <Form.Item label='使用PDB查询' {...formItemLayout}>
+                      <Radio.Group onChange={this.onChangeRadio} value={this.state.searchData.pdb_status}>
                         <Radio value={0}>不使用</Radio>
                         <Radio value={0}>不使用</Radio>
                         {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
                         {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
                         <Radio value={2}>有PDB结构</Radio>
                         <Radio value={2}>有PDB结构</Radio>
                       </Radio.Group>
                       </Radio.Group>
                     </Form.Item>
                     </Form.Item>
-                    <Form.Item
-                      label=""
-                      {...formTailLayout}>
-
-                      <Button
-                        type="primary"
-                        style={{ width: 150 }}
-                        size="large"
-                        loading={this.state.loading}
-                        onClick={this.getDrugsList}>
+                    <Form.Item label='' {...formTailLayout}>
+                      <Button type='primary' style={{ width: 150 }} size='large' loading={this.state.loading} onClick={this.getDrugsList}>
                         Search
                         Search
                       </Button>
                       </Button>
                     </Form.Item>
                     </Form.Item>
-                    <Form.Item label="Tips" {...formTailLayout2}>
-                    <div className='Tips-div'>
+                    <Form.Item label='Tips' {...formTailLayout2}>
+                      <div className='Tips-div'>
                         <div>1.本页面提供Kinase相关药物的搜索。</div>
                         <div>1.本页面提供Kinase相关药物的搜索。</div>
                         <div>2.您可以直接使用药物名称或者ChEMBL ID进行搜索。</div>
                         <div>2.您可以直接使用药物名称或者ChEMBL ID进行搜索。</div>
                         <div>3.您可以使用所需结构或者结构片段以及对应的Smiles进行搜索。</div>
                         <div>3.您可以使用所需结构或者结构片段以及对应的Smiles进行搜索。</div>
-                        <div>  4.您可以筛选其中有PDB结构的配体进行搜索。</div>
+                        <div> 4.您可以筛选其中有PDB结构的配体进行搜索。</div>
                         <div> 5.您可以根据所查看靶点来检索配体。</div>
                         <div> 5.您可以根据所查看靶点来检索配体。</div>
                       </div>
                       </div>
                     </Form.Item>
                     </Form.Item>
@@ -645,156 +573,98 @@ onChangeCheckbox=(e)=>{
                 </div>
                 </div>
               </div>
               </div>
             </TabPane>
             </TabPane>
-            <TabPane tab="Target" key="Target">
-              <div className="top-div">
+            <TabPane tab='Target' key='Target'>
+              <div className='top-div'>
                 <div>
                 <div>
-                  <Form layout="horizontal">
-                    <Form.Item label="请选择Class" {...formItemLayout}>
-                      <Select
-                        value={this.state.TargetSearchData.target_class}
-                        style={{ width: 250 }}
-                        size="large"
-                        placeholder="请选择"
-                        onChange={this.getTargetClassData}>
-                        {TargetClassList.map((item, index) => {
-                          return (
-                            <Option key={index} value={item.name}>
-                              {item.name}({item.number})
-                            </Option>
-                          )
-                        })}
+                  <Form layout='horizontal'>
+                    <Form.Item label='请选择Class' {...formItemLayout}>
+                      <Select value={this.state.TargetSearchData.target_class} style={{ width: 250 }} size='large' placeholder='请选择' onChange={this.getTargetClassData}>
+                        {TargetClassList &&
+                          TargetClassList.length > 0 &&
+                          TargetClassList.map((item, index) => {
+                            return (
+                              <Option key={index} value={item.class}>
+                                {item.class}
+                                {/* {item.name}({item.number}) */}
+                              </Option>
+                            );
+                          })}
                       </Select>
                       </Select>
-                      <Select
-                        value={this.state.TargetSearchData.target_family}
-                        style={{ width: 250 }}
-                        size="large"
-                        placeholder="请选择"
-                        onChange={this.childTargetClassChange}>
-                        {TargetChildClassList.map((item, index) => {
-                          return (
-                            <Option key={index} value={item.name}>
-                               {item.name} ({item.number})
-                            </Option>
-                          )
-                        })}
+                      <Select value={this.state.TargetSearchData.target_family} style={{ width: 250 }} size='large' placeholder='请选择' onChange={this.childTargetClassChange}>
+                        {TargetChildClassList &&
+                          TargetChildClassList.length > 0 &&
+                          TargetChildClassList.map((item, index) => {
+                            return (
+                              <Option key={index} value={item.name}>
+                                {item.name} ({item.number})
+                              </Option>
+                            );
+                          })}
                       </Select>
                       </Select>
                     </Form.Item>
                     </Form.Item>
-                    <Form.Item
-                      label="请输入Target name或Uniprot id"
-                      {...formItemLayout}>
-                      <Input
-                        placeholder="请输入"
-                        style={{ width: 250 }}
-                        size="large"
-                        onChange={this.getTargetData2}
-                        value={this.state.TargetSearchData.target_data}
-                      />
+                    <Form.Item label='请输入Target name或Uniprot id' {...formItemLayout}>
+                      <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getTargetData2} value={this.state.TargetSearchData.target_data} />
                     </Form.Item>
                     </Form.Item>
-                    <Form.Item label="使用PDB查询" {...formItemLayout}>
-                      <Radio.Group
-                        onChange={this.onChangeRadio2}
-                        value={this.state.TargetSearchData.pdb_status}>
+                    <Form.Item label='使用PDB查询' {...formItemLayout}>
+                      <Radio.Group onChange={this.onChangeRadio2} value={this.state.TargetSearchData.pdb_status}>
                         <Radio value={0}>不使用</Radio>
                         <Radio value={0}>不使用</Radio>
                         {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
                         {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
                         <Radio value={2}>有PDB结构</Radio>
                         <Radio value={2}>有PDB结构</Radio>
                       </Radio.Group>
                       </Radio.Group>
                     </Form.Item>
                     </Form.Item>
 
 
-                    <Form.Item
-                      label=""
-                      {...formTailLayout}>
-                      <Button
-                        type="primary"
-                        style={{ width: 150 }}
-                        size="large"
-                        loading={this.state.loading}
-                        onClick={this.getTargetList}>
+                    <Form.Item label='' {...formTailLayout}>
+                      <Button type='primary' style={{ width: 150 }} size='large' loading={this.state.loading} onClick={this.getTargetList}>
                         Search
                         Search
                       </Button>
                       </Button>
                     </Form.Item>
                     </Form.Item>
-                    <Form.Item label="Tips" {...formTailLayout2}>
-                    <div className='Tips-div'>
-                        <div>1.  本页面提供Kinase相关靶点数据检索功能。</div>
-                        <div>2.  您可以直接检索靶点Uniprot名称或者ID，精准搜索您所需要的靶点。</div>
-                        <div>3.  您可以选择查看有PDB结构的靶点。</div>
+                    <Form.Item label='Tips' {...formTailLayout2}>
+                      <div className='Tips-div'>
+                        <div>1. 本页面提供Kinase相关靶点数据检索功能。</div>
+                        <div>2. 您可以直接检索靶点Uniprot名称或者ID，精准搜索您所需要的靶点。</div>
+                        <div>3. 您可以选择查看有PDB结构的靶点。</div>
                       </div>
                       </div>
                     </Form.Item>
                     </Form.Item>
                   </Form>
                   </Form>
                 </div>
                 </div>
               </div>
               </div>
             </TabPane>
             </TabPane>
-            <TabPane tab="Ligand" key="Ligand">
-              <div className="top-div">
+            <TabPane tab='Ligand' key='Ligand'>
+              <div className='top-div'>
                 <div>
                 <div>
-                  <Form layout="horizontal">
-                    <Form.Item label="输入Chemblid或Smiles" {...formItemLayout}>
-                      <Input
-                        placeholder="请输入"
-                        style={{ width: 250 }}
-                        size="large"
-                        onChange={this.getLigendValue}
-                        value={this.state.ligandSearchData.ligand_data}
-                      />
+                  <Form layout='horizontal'>
+                    <Form.Item label='输入Chemblid或Smiles' {...formItemLayout}>
+                      <Input placeholder='请输入' style={{ width: 250 }} size='large' onChange={this.getLigendValue} value={this.state.ligandSearchData.ligand_data} />
                     </Form.Item>
                     </Form.Item>
-                    <Form.Item label="" {...formTailLayout}>
-                      <Button
-                        type="primary"
-                        style={{ marginRight: '50px' }}
-                        onClick={this.getDraw}>
+                    <Form.Item label='' {...formTailLayout}>
+                      <Button type='primary' style={{ marginRight: '50px' }} onClick={this.getDraw}>
                         画结构
                         画结构
                       </Button>
                       </Button>
-                      <Button
-                        type="primary"
-                        style={{ marginLeft: 50, width: 150 }}
-                        size="large"
-                        loading={this.state.loading}
-                        onClick={this.getLigendList}>
+                      <Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getLigendList}>
                         Search
                         Search
                       </Button>
                       </Button>
-                      <div
-                        className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}
-                      >
-                        <Radio.Group
-                          onChange={this.onChangeRadio4}
-                          value={this.state.ligandSearchData.finger}>
+                      <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}>
+                        <Radio.Group onChange={this.onChangeRadio4} value={this.state.ligandSearchData.finger}>
                           <Radio value={0}>Substructure</Radio>
                           <Radio value={0}>Substructure</Radio>
                           {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
                           {/* <Radio value={1}>有GPCR相关PDB结构</Radio> */}
                           <Radio value={1}>Similar Structure</Radio>
                           <Radio value={1}>Similar Structure</Radio>
                         </Radio.Group>
                         </Radio.Group>
                       </div>
                       </div>
-                      <div
-                        className={draw ? 'bottom-div' : 'bottom-div isShowDiv'}
-                        onClick={this.getJsme}>
-                        <Jsme
-                          height="500px"
-                          width="700px"
-                          options="oldlook,star"
-                          onChange={this.logSmiles2}
-                        />
+                      <div className={draw ? 'bottom-div' : 'bottom-div isShowDiv'} onClick={this.getJsme}>
+                        <Jsme height='500px' width='700px' options='oldlook,star' onChange={this.logSmiles2} />
                       </div>
                       </div>
                     </Form.Item>
                     </Form.Item>
                   </Form>
                   </Form>
                 </div>
                 </div>
               </div>
               </div>
             </TabPane>
             </TabPane>
-              <TabPane tab="Indication" key="Indication">
-              <div className="top-div">
+            <TabPane tab='Indication' key='Indication'>
+              <div className='top-div'>
                 <div>
                 <div>
-                  <Form layout="horizontal">
-                    <Form.Item label="输入适应症进行检索" {...formItemLayout}>
-                      <Input
-                        placeholder="请输入适应症"
-                        style={{ width: 250 }}
-                        size="large"
-                        onChange={this.getIndicationValue}
-                        value={this.state.IndicationSearchData.indication}
-                      />
-                      <Button
-                        type="primary"
-                        style={{ marginLeft: 50, width: 150 }}
-                        size="large"
-                        loading={this.state.loading}
-                        onClick={this.getIndicationList}>
+                  <Form layout='horizontal'>
+                    <Form.Item label='输入适应症进行检索' {...formItemLayout}>
+                      <Input placeholder='请输入适应症' style={{ width: 250 }} size='large' onChange={this.getIndicationValue} value={this.state.IndicationSearchData.indication} />
+                      <Button type='primary' style={{ marginLeft: 50, width: 150 }} size='large' loading={this.state.loading} onClick={this.getIndicationList}>
                         Search
                         Search
                       </Button>
                       </Button>
                     </Form.Item>
                     </Form.Item>
@@ -803,11 +673,10 @@ onChangeCheckbox=(e)=>{
               </div>
               </div>
             </TabPane>
             </TabPane>
           </Tabs>
           </Tabs>
-          
         </div>
         </div>
       </div>
       </div>
-    )
+    );
   }
   }
 }
 }
 
 
-export default Home
+export default Home;
\ No newline at end of file

src/routes/Login/LoginForm.js

@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom'
 import { inject, observer } from 'mobx-react/index'
 import { inject, observer } from 'mobx-react/index'
 import { Form, Input,message } from 'antd'
 import { Form, Input,message } from 'antd'
 import PromptBox from '../../components/PromptBox'
 import PromptBox from '../../components/PromptBox'
-import { request } from '../../utils/request'
+import request from '../../utils/request'
 import md5 from 'js-md5';
 import md5 from 'js-md5';
 import qs from 'qs'
 import qs from 'qs'
 
 

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 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';
 
 
-const url = ''
+const url = '';
 const imgs = [
 const imgs = [
   // 'http://47.99.130.140/imgs/wallhaven-p8r1e9.jpg',
   // '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-e7zyy8.jpg',
   // 'http://47.99.130.140/imgs/wallhaven-6k9e7q.jpg',
   // 'http://47.99.130.140/imgs/wallhaven-6k9e7q.jpg',
   // 'http://47.99.130.140/imgs/photo.jpg',
   // 'http://47.99.130.140/imgs/photo.jpg',
-]
+];
 
 
-
-
-
-@withRouter @inject('appStore') @observer
+@withRouter //更新的作用
+@inject('appStore') //接收
+@observer //组件变为响应式
+//这三步会把对应的store挂在props上
 class Login extends React.Component {
 class Login extends React.Component {
   state = {
   state = {
-    showBox: 'login',   //展示当前表单
-    url: '',  //背景图片
-    loading:false,
-    loading2:false,
-  }
+    showBox: 'login', //展示当前表单
+    url: '', //背景图片
+    loading: false,
+    loading2: false,
+  };
 
 
-  componentDidMount () {
-    this.props.appStore.toggleLogin(true, { username: 'username' })
+  componentDidMount() {
+    this.props.appStore.toggleLogin(true, { username: 'username' });
     // const { from } = this.props.location.state || { from: { pathname: '/Kinase' } }
     // const { from } = this.props.location.state || { from: { pathname: '/Kinase' } }
-    const { from } = this.props.location.state || { from: { pathname: '/login' } }
-    this.props.history.push(from)
- 
+    const { from } = this.props.location.state || { from: { pathname: '/login' } };
+    this.props.history.push(from);
   }
   }
 
 
-  componentWillUnmount () {
-    this.particle && this.particle.destory()
-    notification.destroy()
+  componentWillUnmount() {
+    this.particle && this.particle.destory();
+    notification.destroy();
   }
   }
   //载入页面时的一些处理
   //载入页面时的一些处理
   initPage = () => {
   initPage = () => {
     this.setState({
     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
   //切换showbox
   switchShowBox = (box) => {
   switchShowBox = (box) => {
     this.setState({
     this.setState({
-      showBox: box
-    })
-  }
+      showBox: box,
+    });
+  };
 
 
   //登录的背景图太大，等载入完后再显示，实际上是图片预加载，
   //登录的背景图太大，等载入完后再显示，实际上是图片预加载，
-  loadImageAsync (url) {
+  loadImageAsync(url) {
     return new Promise(function(resolve, reject) {
     return new Promise(function(resolve, reject) {
       const image = new Image();
       const image = new Image();
       image.onload = function() {
       image.onload = function() {
         resolve(url);
         resolve(url);
       };
       };
       image.onerror = function() {
       image.onerror = function() {
-        console.log('图片载入错误')
+        console.log('图片载入错误');
       };
       };
       image.src = url;
       image.src = url;
     });
     });
   }
   }
 
 
-  render () {
-    const {showBox,loading} = this.state
+  render() {
+    const { showBox, loading } = this.state;
     return (
     return (
       <div className='index-div'>
       <div className='index-div'>
-        <LogoTitlte></LogoTitlte>
+        <LogoTitlte />
         <div id='login-page'>
         <div id='login-page'>
-        <div className='home-page-div'>
-        <div>Yashen API 是一个集成了化学、生物学、计算化学、计算生物学和机器学习的数据驱动的药物发现平台，帮助药物化学家在药物智能发现领域大展身手。</div>
-        <div>我们的Kinase平台专注于挖掘包括药物和配体结构、蛋白质结构在内的Kinase数据，并开发计算工具来加速Kinase药物发现。</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 Kinase platform focuses on mining available Kinase knowledge including corresponding drugs and ligands structure and protein structures data, and developing computational tools to accelerate Kinase drug discovery.</div>
+          <div className='home-page-div'>
+            <div>Yashen API 是一个集成了化学、生物学、计算化学、计算生物学和机器学习的数据驱动的药物发现平台，帮助药物化学家在药物智能发现领域大展身手。</div>
+            <div>我们的Kinase平台专注于挖掘包括药物和配体结构、蛋白质结构在内的Kinase数据，并开发计算工具来加速Kinase药物发现。</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 Kinase platform focuses on mining available Kinase knowledge including corresponding drugs and ligands structure and protein structures data, and developing computational tools to
+              accelerate Kinase drug discovery.
+            </div>
           </div>
           </div>
           {
           {
-          
-              <div>
-                <div id='backgroundBox' style={styles.backgroundBox}/>
-                <div className='container'>
-                  <LoginForm
-                    className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'}
-                    switchShowBox={this.switchShowBox}/>
-                  <RegisterForm
-                    className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'}
-                    switchShowBox={this.switchShowBox}/>
-                </div>
+            <div>
+              <div id='backgroundBox' style={styles.backgroundBox} />
+              <div className='container'>
+                <LoginForm className={showBox === 'login' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
+                <RegisterForm className={showBox === 'register' ? 'box showBox' : 'box hiddenBox'} switchShowBox={this.switchShowBox} />
               </div>
               </div>
+            </div>
           }
           }
-
         </div>
         </div>
-      
       </div>
       </div>
-    )
+    );
   }
   }
 }
 }
 
 
@@ -129,30 +130,30 @@ const styles = {
     height: '100vh',
     height: '100vh',
     // backgroundImage: `url(${url})`,
     // backgroundImage: `url(${url})`,
     backgroundSize: 'cover',
     backgroundSize: 'cover',
-    transition:'all .5s',
+    transition: 'all .5s',
     // backgroundColor: '#4FA1D9'
     // backgroundColor: '#4FA1D9'
   },
   },
   focus: {
   focus: {
     // transform: 'scale(0.7)',
     // transform: 'scale(0.7)',
     width: '20px',
     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,
     marginLeft: -45,
     marginTop: -18,
     marginTop: -18,
-    color:'#000',
-    fontWeight:500,
-    fontSize:24
+    color: '#000',
+    fontWeight: 500,
+    fontSize: 24,
   },
   },
-}
+};
 
 
-export default Login
+export default Login;

src/routes/MolecularSearch/index.js

 import React, { Component } from "react";
 import React, { Component } from "react";
 import { Jsme } from "jsme-react";
 import { Jsme } from "jsme-react";
 import qs from "qs";
 import qs from "qs";
-import { request } from "../../utils/request";
+import request from "../../utils/request";
 import { Input, Button, Modal, Table, message, Pagination } from "antd";
 import { Input, Button, Modal, Table, message, Pagination } from "antd";
 import Molstar from "molstar-react";
 import Molstar from "molstar-react";
 import "./index.css";
 import "./index.css";

src/routes/drugbank/IndicationDetails/index.js

@@ -9,7 +9,7 @@ import {
   Tag,
   Tag,
   Typography,
   Typography,
 } from "antd";
 } from "antd";
-import { request } from "../../../utils/request";
+import request from "../../../utils/request";
 import "./index.css";
 import "./index.css";
 import qs from "qs";
 import qs from "qs";
 const { Title } = Typography;
 const { Title } = Typography;

src/routes/drugbank/LigandDetails/index.js

@@ -18,7 +18,7 @@ import {
   InputNumber,
   InputNumber,
   Typography,
   Typography,
 } from "antd";
 } from "antd";
-import { request } from "../../../utils/request";
+import request from "../../../utils/request";
 import Molstar from "molstar-react";
 import Molstar from "molstar-react";
 import { Jsme } from "jsme-react";
 import { Jsme } from "jsme-react";
 import qs from "qs";
 import qs from "qs";

src/routes/drugbank/SearchDetails/index.js

@@ -18,7 +18,7 @@ import {
   InputNumber,
   InputNumber,
   Typography,
   Typography,
 } from "antd";
 } from "antd";
-import { request } from "../../../utils/request";
+import request from "../../../utils/request";
 import Molstar from "molstar-react";
 import Molstar from "molstar-react";
 import { Jsme } from "jsme-react";
 import { Jsme } from "jsme-react";
 import qs from "qs";
 import qs from "qs";

src/routes/drugbank/SearchList/index.js

 import React, { Component } from "react";
 import React, { Component } from "react";
 import { Jsme } from "jsme-react";
 import { Jsme } from "jsme-react";
 import { Card, Button, Pagination, Tabs, Spin, message, Collapse } from "antd";
 import { Card, Button, Pagination, Tabs, Spin, message, Collapse } from "antd";
-import { request } from "../../../utils/request";
+import request from "../../../utils/request";
 import qs from "qs";
 import qs from "qs";
 import "./index.css";
 import "./index.css";
 const { TabPane } = Tabs;
 const { TabPane } = Tabs;

src/routes/drugbank/TargetDetails/index.js

@@ -19,7 +19,7 @@ import {
   Typography,
   Typography,
   Pagination,
   Pagination,
 } from "antd";
 } from "antd";
-import { request } from "../../../utils/request";
+import request from "../../../utils/request";
 import Molstar from "molstar-react";
 import Molstar from "molstar-react";
 import { Jsme } from "jsme-react";
 import { Jsme } from "jsme-react";
 import qs from "qs";
 import qs from "qs";

src/routes/drugbank/index.js

@@ -3,7 +3,7 @@ import { Form, Input, Button,Select ,Tabs,message,Radio,Checkbox,Row ,Col} from
 import LogoTitlte from '../../components/LogoTitlte/index'
 import LogoTitlte from '../../components/LogoTitlte/index'
 import { Jsme } from 'jsme-react'
 import { Jsme } from 'jsme-react'
 import qs from 'qs'
 import qs from 'qs'
-import { request } from '../../utils/request'
+import request from '../../utils/request'
 import './style.css'
 import './style.css'
 const { TabPane } = Tabs;
 const { TabPane } = Tabs;
 const { Option } = Select;
 const { Option } = Select;

src/utils/request-login.js

+import axios from 'axios';
+import { getQueryString } from './utils';
+import { message } from 'antd';
+//禁用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();
+
+const baseURL = 'http://52.83.169.190:8002/'; //线上正式环境
+// const baseURL = 'http://69.235.144.91:8002/';  测试环境
+
+//对axios二次封装
+// console.log('getQueryString', getQueryString('token'));
+// console.log('localStorage', localStorage.getItem('token'));
+const token = getQueryString('token') || localStorage.getItem('token');
+const request = axios.create({
+  baseURL,
+  timeout: 15000,
+  headers: {
+    // 'Content-Type': 'application/json',
+    // 部分接口需要formdate格式的数据  'Content-Type': 'application/x-www-form-urlencoded' qs.stringify(data)
+    accessToken: token,
+  },
+});
+
+function checkToken(config) {
+  // message.error('校验token');
+  // alert(' 校验token111');
+  request
+    .get('http://69.235.144.91:8048/yszh-login/auth/checkToken')
+    .then((res) => {
+      console.log('--res', res);
+      if (res.data.code === 200) {
+        console.log('token 检验通过');
+        return config;
+      } else {
+        localStorage.removeItem('token');
+        // alert(' 失败');
+        // message.error('请重新登录');
+        console.log('token校验没通过  返回登录页');
+        // window.open('http://localhost:3000/#/login');
+        window.open('http://localhost:3000/#/login', '_self');
+      }
+    })
+    .catch((err) => {
+      localStorage.removeItem('token');
+      // alert(' 服务器报错');
+      console.log('token校验没通过  返回登录页');
+      window.open('http://localhost:3000/#/login', '_self');
+      console.log('err', err);
+      return false;
+    });
+}
+checkToken();
+
+//拦截器
+request.interceptors.request.use((config) => {
+  // alert('拦截器..');
+  console.log('token---', '拦截器方法校验token');
+  console.log(config);
+  if (getQueryString('token') || localStorage.getItem('token')) {
+    checkToken(config);
+  } else {
+    console.log('token为空....');
+    window.open('http://localhost:3000/#/login');
+  }
+});
+
+request.interceptors.response.use(
+  (res) => {
+    return res;
+  },
+  (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/request.js

 import axios from 'axios';
 import axios from 'axios';
-axios.defaults.timeout = 10000;
-document.onkeydown = function() {
-  var e = window.event || arguments[0];
-  if (e.keyCode == 123) {
+import { getQueryString } from './utils';
+import { message } from 'antd';
+//禁用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;
     return false;
-  } else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
-    return false;
-  }
-};
-document.oncontextmenu = function() {
-  return false;
-};
+  };
+}
+// disableF12();
 
 
-var baseURL = 'http://52.83.169.190:8002/';
+// const baseURL = 'http://52.83.169.190:8002/'; //线上正式环境
+const baseURL = 'http://69.235.144.91:8002/'; // 测试环境
 
 
-export const request = axios.create({
-  baseURL: baseURL,
+//对axios二次封装
+// console.log('getQueryString', getQueryString('token'));
+// console.log('localStorage', localStorage.getItem('token'));
+const token = getQueryString('token') || localStorage.getItem('token');
+const request = axios.create({
+  baseURL,
+  timeout: 15000,
+  // headers: {
+    // 'Content-Type': 'application/json',
+    // accessToken: token,
+  // },
 });
 });
+
+function checkToken(config) {
+  // message.error('校验token');
+  // alert('alert 校验token')
+  request
+    .get('http://69.235.144.91:8048/yszh-login/auth/checkToken')
+    .then((res) => {
+      console.log('checkToken--res', res);
+      if (res.data.code === 200) {
+        console.log('token 检验通过');
+        return config;
+      } else {
+        message.error('请重新登录');
+        console.log('token校验没通过  返回登录页');
+        window.open('http://localhost:3000/#/login');
+        // window.open('http://localhost:3000/#/login', '_self');
+      }
+    })
+    .catch((err) => {
+      console.log('token校验没通过  返回登录页');
+      window.open('http://localhost:3000/#/login', '_self');
+      console.log('err', err);
+    });
+}
+// checkToken();
+//拦截器
+// request.interceptors.request.use((config) => {
+  // console.log('token---', '拦截器方法校验token');
+  // if (!!token) {
+    // checkToken(config);
+    // return config;
+  // } else {
+    // console.log('token为空....');
+    // window.open('http://localhost:3000/#/login', '_self');
+  // }
+//   return config;
+// });
+
+// request.interceptors.response.use(
+//   (res) => {
+//     return res;
+//   },
+//   (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

@@ -63,4 +63,18 @@ export function preloadingImages(arr) {
     const img = new Image()
     const img = new Image()
     img.src = item
     img.src = item
   })
   })
+}
+
+/**
+ * 获取URL中指定的参数
+ */
+
+export function getQueryString(name) {
+  let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
+  let r = window.location.hash.split('?')[1] && window.location.hash.split('?')[1].match(reg); //获取url中"?"符后的字符串并正则匹配
+  let context = '';
+  if (r != null) context = decodeURIComponent(r[2]);
+  reg = null;
+  r = null;
+  return context == null || context == '' || context == 'undefined' ? '' : context;
 }
 }
\ No newline at end of file