From: Hongyuan Ma <CS_MaleicAcid@163.com>
Date: Sun, 24 Jun 2018 04:00:48 +0000 (+0800)
Subject: add link to detail page
X-Git-Url: http://git.postgresql.org/gitweb/static/%7B%7Bpgdulink%28?a=commitdiff_plain;h=ac518b599727ec522b8d122ef3ea7af19495a3af;p=pgperffarm.git

add link to detail page
---

diff --git a/front-end/src/app.jsx b/front-end/src/app.jsx
index 8788c32..7b5b0f9 100644
--- a/front-end/src/app.jsx
+++ b/front-end/src/app.jsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import ReactDom from 'react-dom';
 import {BrowserRouter as Router, Route, Link, Redirect, Switch} from 'react-router-dom';
+import createHistory from 'history/createHashHistory'
+const history = createHistory()
 import {spring, AnimatedRoute, AnimatedSwitch} from 'react-router-transition';
 // layout
 import Layout from 'component/layout/index.jsx'
@@ -56,20 +58,21 @@ class App extends React.Component {
     render() {
         let LayoutRouter = (
             <Layout>
-                    <Route exact path="/login" component={Login}/>
+                    <Route exact path="/login/" component={Login}/>
                     <Route exact path="/" component={Home}/>
 
-                    <Route exact path="/home" component={Home}/>
-                    <Route exact path="/status" component={Status}/>
-                    <Route exact path="/ppolicy" component={PPolicy}/>
-                    <Route exact path="/detail" component={DetailInfo}/>
+                    <Route exact path="/home/" component={Home}/>
+                    <Route exact path="/status/" component={Status}/>
+                    <Route exact path="/ppolicy/" component={PPolicy}/>
+                    <Route path="/detailInfo/:uuid" component={DetailInfo}/>
+                    {/*<Route path="/detail/:uuid" component={DetailInfo}/>*/}
                     {/*<Redirect exact from="/order" to="/order/index"/>*/}
                     {/*<Redirect exact from="/user" to="/user/index"/>*/}
                     {/*<Route component={ErrorPage}/>*/}
             </Layout>
         );
         return (
-            <Router>
+            <Router history={history}>
                 <AnimatedSwitch
                     atEnter={bounceTransition.atEnter}
                     atLeave={bounceTransition.atLeave}
diff --git a/front-end/src/component/nav-top/index.jsx b/front-end/src/component/nav-top/index.jsx
index 7ea58af..a9843b2 100644
--- a/front-end/src/component/nav-top/index.jsx
+++ b/front-end/src/component/nav-top/index.jsx
@@ -65,10 +65,12 @@ class NavTop extends React.Component {
                         Farm</b></a>
                 </div>
                 <ul className="nav navbar-top-links navbar-left">
-                    <li><a href="/home"> <span className="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a>
+                    <li><Link to="/home"> <span className="glyphicon glyphicon-home" aria-hidden="true"></span> Home</Link>
                     </li>
-                    <li><a href="/status"> <span className="glyphicon glyphicon-tasks" aria-hidden="true"></span> Status</a>
+                    <li><Link to="/status"><span className="glyphicon glyphicon-tasks" aria-hidden="true"></span>Status</Link>
                     </li>
+                    {/*<li><Link to="/classifiedDisplay">分类展示</Link><a href="/status"> <span className="glyphicon glyphicon-tasks" aria-hidden="true"></span> Status</a>*/}
+                    {/*</li>*/}
                     <li><a href="#"> <span className="glyphicon glyphicon-blackboard" aria-hidden="true"></span>Machine</a>
                     </li>
 
diff --git a/front-end/src/page/detailInfo/index.jsx b/front-end/src/page/detailInfo/index.jsx
index 7668449..93dd26f 100644
--- a/front-end/src/page/detailInfo/index.jsx
+++ b/front-end/src/page/detailInfo/index.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import './index.css';
-import {Table, Divider, Segment, Image, Label, Card, Button} from 'semantic-ui-react'
-import TestResultCard from 'component/test-result-card/index.jsx';
+import {Table, Divider, Segment, Image, Label, Card, Button, List, Icon} from 'semantic-ui-react'
 import PGUtil        from 'util/util.jsx'
 import Record      from 'service/record-service.jsx'
 const _util = new PGUtil();
@@ -10,9 +9,8 @@ class DetailInfo extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            recordNo: 1,
-            detailInfo: {},
-
+            recordNo: this.props.match.params.uuid,
+            recordInfo: {},
         }
 
         // this.onPageChange = this.onPageChange.bind(this);
@@ -42,23 +40,35 @@ class DetailInfo extends React.Component {
         return (
             <div className="container-fluid detail-container">
                 <div className="col-md-3">
+                    <h2>{this.state.recordNo}</h2>
                     <Segment vertical>Farmer Info</Segment>
                     <Card>
                         <Card.Content>
-                            <Image floated='right' size='mini' src='http://www.semantic-ui.cn/images/avatar2/small/lena.png' />
-                            <Card.Header>Steve Sanders</Card.Header>
-                            <Card.Meta>Friends of Elliot</Card.Meta>
+                            <Image floated='right' size='mini'
+                                   src='http://www.semantic-ui.cn/images/avatar2/small/lena.png'/>
+                            <Card.Header>Farmer: Cabbage</Card.Header>
+                            <Card.Meta>report num: 4</Card.Meta>
                             <Card.Description>
-                                Steve wants to add you to the group <strong>best friends</strong>
+                                <List>
+                                    <List.Item icon='computer' content='ubuntu 16' />
+                                    <List.Item icon='microchip' content='x86 64' />
+                                    <List.Item
+                                        icon='mail'
+                                        content={<a href='mailto:jack@semantic-ui.com'>mahongyuan1997@semantic-ui.com</a>}
+                                    />
+                                </List>
+                                {/*<div>*/}
+                                    {/*<ul className="list-group" >*/}
+                                        {/*<li className="list-group-item">system os:ubuntu 16</li>*/}
+                                        {/*<li className="list-group-item">camp: x86 64</li>*/}
+                                    {/*</ul>*/}
+                                {/*</div>*/}
                             </Card.Description>
                         </Card.Content>
                         <Card.Content extra>
                             <div className='ui two buttons'>
                                 <Button basic color='green'>
-                                    Approve
-                                </Button>
-                                <Button basic color='red'>
-                                    Decline
+                                    Other records
                                 </Button>
                             </div>
                         </Card.Content>
diff --git a/front-end/src/service/record-service.jsx b/front-end/src/service/record-service.jsx
index 3108aaa..33ba627 100644
--- a/front-end/src/service/record-service.jsx
+++ b/front-end/src/service/record-service.jsx
@@ -18,15 +18,13 @@ class Record{
     }
 
     // get record detail info
-    getRecordInfo(recordId){
-        let url = PGConstant.base_url + '/detail';
-
+    getRecordInfo(listParam){
+        let url = PGConstant.base_url + '/detail/';
+        url = url + listParam.recordNo
         return _util.request({
             type    : 'get',
-            url     : '/detail',
-            data    : {
-                productId : recordId || 0
-            }
+            url     : url,
+            // data    : {'Ldw7RrdP7jj4q89kgXCfeY'}
         });
     }
 }
diff --git a/front-end/src/util/basic-table/index.jsx b/front-end/src/util/basic-table/index.jsx
index e63141d..bcd2678 100644
--- a/front-end/src/util/basic-table/index.jsx
+++ b/front-end/src/util/basic-table/index.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import {Link}     from 'react-router-dom';
 import {Icon, Table, Label, Message, Button} from 'semantic-ui-react'
 import Pagination from 'util/pagination/index.jsx'
 import './index.css';
@@ -28,7 +29,6 @@ class BasicTable extends React.Component {
     }
 
 
-
     onPageNumChange(current) {
         this.setState({
             currentPage: current
@@ -81,11 +81,9 @@ class BasicTable extends React.Component {
                         <Bubble num={trend.regressive} name="regressive"/>
                     </Table.Cell>
                     <Table.Cell textAlign='center'>
-                        <a color='linkedin' href={'detailInfo/' + record.uuid}>
-                            {/*<Button size='mini' color='linkedin'>*/}
+                        <Link color='linkedin' to={'detailInfo/' + record.uuid}>
                             <Icon name='linkify'/> Link
-                            {/*</Button>*/}
-                        </a>
+                        </Link>
                     </Table.Cell>
                     {/*date*/}
                     <Table.Cell>{record.add_time}</Table.Cell>
diff --git a/front-end/webpack.config.js b/front-end/webpack.config.js
index 63b164a..4eeec6b 100644
--- a/front-end/webpack.config.js
+++ b/front-end/webpack.config.js
@@ -14,26 +14,26 @@ module.exports = {
     },
     resolve: {
         // extensions: ['', '.js', '.jsx'],
-        alias : {
-            page : path.resolve(__dirname, 'src/page'),
-            image : path.resolve(__dirname, 'src/image'),
-            component : path.resolve(__dirname, 'src/component'),
-            service : path.resolve(__dirname, 'src/service'),
-            util : path.resolve(__dirname, 'src/util'),
+        alias: {
+            page: path.resolve(__dirname, 'src/page'),
+            image: path.resolve(__dirname, 'src/image'),
+            component: path.resolve(__dirname, 'src/component'),
+            service: path.resolve(__dirname, 'src/service'),
+            util: path.resolve(__dirname, 'src/util'),
         }
     },
 
     module: {
         rules: [{
-                test: /\.jsx$/,
-                exclude: /(node_modules)/,
-                use: {
-                    loader: 'babel-loader',
-                    options: {
-                        presets: ['env', 'react']
-                    }
-                },
+            test: /\.jsx$/,
+            exclude: /(node_modules)/,
+            use: {
+                loader: 'babel-loader',
+                options: {
+                    presets: ['env', 'react']
+                }
             },
+        },
             {
                 test: /\.css$/,
                 use: ExtractTextPlugin.extract({
@@ -83,7 +83,7 @@ module.exports = {
         })
     ],
     devServer: {
-        contentBase: path.join(__dirname, "dist"),
+        contentBase: path.join(__dirname, "/dist/"),
         //compress: true,
         port: 8086,
         historyApiFallback: true,