TODO: router

src/App.js

@@ -1,30 +1,34 @@
-import Icon, {
+import {
   MenuFoldOutlined, MenuUnfoldOutlined,
-  DatabaseOutlined, DatabaseFilled
+  DatabaseFilled
 } from '@ant-design/icons';
-import { Row, Col, Divider } from 'antd';
 import { Button, Layout, Menu, Tabs } from 'antd';
 import 'antd/dist/antd.css';
-import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom';
-import React from 'react';
+import React, {useRef} from 'react';
 
 
 import './App.less';
-import DataTable from './Table';
-import ContentTable from './ContentTable';
-import DataTableTest from './TableTest';
 import ChartsCount from './ChartsCount';
+import TableData from './TableData';
+import TabsRoute from './Router';
+import { Link, Route, Router, HashRouter, Switch } from 'react-router-dom';
 
-const { TabPane }  = Tabs;
-const bstyle = {  width: "100px" };
+const { TabPane } = Tabs;
 const { Header, Content, Footer, Sider } = Layout;
 
 class App extends React.Component {
-  state = {
-    platform: "openrec",
-    collapsed: false,
-    tkey: "content_table",
-  };
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      platform: "openrec",
+      collapsed: false,
+      tkey: "content_table",
+      location: null,
+    }
+  }
+
+ 
 
   toggleCollapsed = () => {
     this.setState({
@@ -33,90 +37,110 @@ class App extends React.Component {
   };
 
   changePlatform = (p) => {
-    this.setState({platform: p});
-    if (this.refs.tcharts && this.refs.tcharts.state.platform !== p) {
-      this.refs.tcharts.changePlatform(p)
-    }
-    this.refs.ctable.changePlatform(p);
+    // this.setState({ platform: p });
+    // if (this.chartscount && this.chartscount.state.platform !== p) {
+    //   this.chartscount.changePlatform(p)
+    // }
+    // this.tabledata.changePlatform(p);
   }
 
   render() {
     return (
-    
+      <HashRouter>
+        
       <Layout>
         <Sider
-            trigger={null}
-            collapsible
-            collapsed={this.state.collapsed}
-            inlineCollapsed={this.state.collapsed} 
+          trigger={null}
+          collapsible
+          collapsed={this.state.collapsed}
+          inlineCollapsed={this.state.collapsed}
         >
-        <Button type="primary" onClick={this.toggleCollapsed} style={{ background: '#6739b6', width: "100%", colorRendering: "optimizeSpeed" }}>
+          <Button type="primary" onClick={this.toggleCollapsed} style={{ background: '#6739b6', width: "100%", colorRendering: "optimizeSpeed" }}>
             {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
-        </Button>
+          </Button>
           <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}
-          defaultOpenKeys={['sub1']}
+            defaultOpenKeys={['sub1']}
           >
-              <Menu.Item key="openrec" icon={<DatabaseFilled/>} onClick={(e)=>{    this.changePlatform(e.key);  }}  >
-                  openrec
-              </Menu.Item>
-              <Menu.Item key="twitcasting" icon={<DatabaseFilled/>} onClick={(e)=>{    this.changePlatform(e.key); ;  }}  >
-                  twitcasting
-              </Menu.Item>
-              <Menu.Item key="twitch" icon={<DatabaseFilled/>} onClick={(e)=>{    this.changePlatform(e.key); }}  >
-                twitch
-              </Menu.Item>
+            <Menu.Item key="openrec" icon={<DatabaseFilled />} onClick={(e) => { this.changePlatform(e.key); }}  >
+              openrec
+                </Menu.Item>
+            <Menu.Item key="twitcasting" icon={<DatabaseFilled />} onClick={(e) => { this.changePlatform(e.key);; }}  >
+              twitcasting
+                </Menu.Item>
+            <Menu.Item key="twitch" icon={<DatabaseFilled />} onClick={(e) => { this.changePlatform(e.key); }}  >
+              twitch
+                </Menu.Item>
           </Menu>
-      </Sider>
-  <Layout>
-  <Header style={{ background: '#000', padding:"0" }}>
-  
-  </Header>
-  <Content ref="content"  style={{ margin: '0 8px' }}>
-      <Tabs  
-       onChange={(e)=>{ 
-            const { platform } = this.state;
-            this.setState({key: e})
+        </Sider>
+        <Layout>
+          
+          <Header style={{ background: '#000', padding: "0" }}>
 
-            switch (e) {
-              case "content_table":
-                if (this.refs.ctable) {
-                  this.refs.ctable.changePlatform(platform);
+          </Header>
+    
+          <Content ref="content" style={{ margin: '0 8px' }}>
+          <Switch>
+            <Tabs
+              onChange={(e) => {
+                const { platform } = this.state;
+                this.setState({ key: e })
+                
+                switch (e) {
+                  case "content_table":
+                    this.props.history.push("#/data")
+                    if (this.refs.ctable) {
+                      this.refs.ctable.changePlatform(platform);
+                    }
+                    break;
+                  case "tag_count":
+                    this.props.history.push("#/count")
+                    if (this.refs.tcharts) {
+                      this.refs.tcharts.changePlatform(platform);
+                    }
+                    break
+                  default:
+                    break;
                 }
-                break;
-              case "tag_count":
-                if( this.refs.tcharts ) {
-                  this.refs.tcharts.changePlatform(platform);
-                }
-                break
-              default:
-                break;
-            } 
+
+              }} >
+
             
-       }} >
 
-        <TabPane  tab="数据表格" key="content_table">
-          <ContentTable  ref="ctable" platform={this.state.platform}></ContentTable>
-        </TabPane>
-        <TabPane  tab="tag统计" key="tag_count">
-          <ChartsCount  platform={this.state.platform}  ref="tcharts"> </ChartsCount>
-        </TabPane>
-      </Tabs>
-      
-      
- </Content>
 
-  <Footer style={{ textAlign: 'center' }}>
-      Intimate ©2020 Created by eson
-  </Footer>
+            
 
-  </Layout>
-  </Layout>
-);
+              <TabPane tab="数据表格" key="content_table">
+              <Route path="/data"  render={()=>{
+                  return <TableData platform={this.state.platform}  ></TableData>
+                }} ></Route>
+                            <Route path="/count"  render={()=>{
+                  return <ChartsCount platform={this.state.platform} ></ChartsCount>
+                }} ></Route>
+              </TabPane>
+
+              <TabPane tab="tag统计" key="tag_count">
+              <Route path="/data"  render={()=>{
+                  return <TableData platform={this.state.platform}  ></TableData>
+                }} ></Route>
+                <Route path="/count"  render={()=>{
+                  return <ChartsCount platform={this.state.platform} ></ChartsCount>
+                }} ></Route>
+              </TabPane>
+              
+            </Tabs>
+            </Switch>
+          </Content>
+
+          <Footer style={{ textAlign: 'center' }}>
+            Intimate ©2020 Created by eson
+            </Footer>
+        </Layout>
+      </Layout>
+      </HashRouter>         
+    );
   }
 }
 
 // ReactDOM.render(<App />, mountNode);
 
-
-
 export default App;

src/ChartsCount.js

@@ -82,14 +82,17 @@ function getOption(state = {}) {
 }
 
 class ChartsCount extends React.Component {
-
-    state = {
-        option: {},
-        platform: this.props.platform,
-        data: {},
-        countkey: "count",
-        title: "统计数量关系",
-    }
+    
+    constructor(props) {
+        super(props)
+        this.state = {
+            option: {},
+            platform: this.props.platform,
+            data: {},
+            countkey: "count",
+            title: "与数量关系",
+        }
+      }
 
     changePlatform = (p) => {
         this.setState({ platform: p }, () => {
@@ -141,7 +144,6 @@ class ChartsCount extends React.Component {
                     option={getOption(this.state)}
                     style={{ height: '600px', width: '100%' }}
                     className='react_for_echarts' />
-
             </div>
         );
     }

src/ContentTable.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import DataTable from './Table.js'; 
- 
-class ContentTable extends React.Component {
-
-    changePlatform = (p) => {
-        this.refs.table.updatePlatform(p);
-    }
-
-    render() {
-        // const {platform} = this.state;
-        return (<div style={{ padding: 24, background: '#fff', minHeight: 780 }}>
-            <DataTable ref="table" ></DataTable >
-        </div>)
-    }
-}
- 
-export default ContentTable;
- 

src/Router.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import App from './App';
+import { HashRouter, Route, Switch, BrowserRouter, Redirect } from 'react-router-dom';
+import TableData from "./TableData";
+import ChartsCount from "./ChartsCount";
+import { Link } from 'react-router-dom';
+import { Button, Layout, Menu, Tabs } from 'antd';
+
+const { TabPane } = Tabs;
+
+
+const MainRouter = () => {  
+
+    return (
+        <BrowserRouter>
+            <Switch>
+                {/* <Redirect from="/" to="#/data" ></Redirect> */}
+                <Route exact path="/" component={
+                    App 
+                } >
+                </Route>
+                <Route exact path="/login" component={
+                    ChartsCount
+                }>
+                </Route>
+            </Switch>
+        </BrowserRouter>
+         )
+    
+};
+
+
+export default MainRouter;

src/Table.js

@@ -1,278 +0,0 @@
-import React, { useState } from 'react';
-import { Table, Input,  Select, Tag, Row, Col } from 'antd';
-import './Table.less';
-import apihost from './Var';
-
- const { Option } = Select;
-
-
-
-
-
-
-
-
-class DataTable extends React.Component {
-
-
-
-  state = {
-    data: [],
-    platform: "openrec",
-    pagination: {
-      current: 1,
-      pageSize: 20,
-      position: ["topLeft"],
-    },
-    loading: false,
-    filters: null,
-    sorter: null,
-  };
-
-  expandedRow = (record) => {
-
-    const ecolumns = [
-      {
-        title: 'uid',
-        dataIndex: 'Uid',
-        key: 'Uid',
-        dataField:'uid',
-      },
-      {
-        title: '直播地址',
-        dataIndex: 'LiveUrl',
-        key: 'LiveUrl',
-        dataField: 'live_url'
-      },
-      {
-        title: '直播标题',
-        dataIndex: 'LiveTitle',
-        key: 'LiveTitle',
-        dataField:'live_title',
-      },
-      {
-        title: '近直播开始时间',
-        dataIndex: 'LiveStartTime',
-        key: 'LiveStartTime',
-        dataField:'live_start_time',
-      },
-      {
-        title: '近直播结束时间',
-        dataIndex: 'LiveEndTime',
-        key: 'LiveEndTime',
-        dataField:'live_end_time',
-      },
-    ];
-
-    var data = [record];
-    return <Table rowClassName="subtable" size="small" bordered={true} columns={ecolumns} dataSource={data} pagination={false} />;
-  };
-
-  updatePlatform(p) {
-
-    const { pagination, sorter, filters } = this.state;
-    // console.log("filters", filters); // ${filters?`&filters=${filters}`:""}
-    // console.log("sorter", sorter);
-    pagination.current = 1;
-    this.setState({ platform: p }, () => {
-      this.fetchapi({
-        pagination,
-        sorter,
-        filters
-      });
-    });
-
-  }
-
-  componentDidMount() {
-    const { platform } = this.state;
-    this.updatePlatform(platform);
-  }
-
-  handleTableChange = (pagination, filters, sorter) => {
- 
-    this.fetchapi({
-      pagination,
-      sorter,
-      filters,
-    });
-  };
-
-  fetchapi = (params = {}) => {
- 
-    const { pagination, sorter, filters } = params;
-    const { platform,  } = this.state;
-    this.setState({ loading: true });
-    // console.log("filters", filters); // ${filters?`&filters=${filters}`:""}
-    // console.log("sorter", sorter);
-    fetch(`${apihost}/${platform}/query?page=${pagination.current}&psize=${pagination.pageSize}${sorter?`&orderfield=${sorter.column?sorter.column.dataField:""}&ordertype=${sorter.order}`:""}`, { mode: "cors" }).then((response) => {
-      // console.log(response);
-      response.json().then(
-        (data) => {
-          var result = JSON.parse(data)
-          this.setState({
-            loading: false,
-            data: result.Data ? result.Data : [],
-            pagination: {
-              ...params.pagination,
-              total: 100000,
-            },
-            filters: filters, 
-            sorter: sorter
-          });
-        }
-      )
-    })
-  };
-
-  render() {
-
-    let { data, pagination, loading, sorter, filters } = this.state;
-    // sorter = sorter || {};
-    // filters = filters || {};
-
-    const columns = [
-        {
-          title: '平台',
-          dataIndex: 'Platform',
-          editable: false,
-          key: 'Platform',
-          //   width: "8%",
-          dataField: 'platform',
-        },
-        {
-          title: 'userid',
-          dataIndex: 'UserId',
-          editable: false,
-          key: 'UserId',
-          dataField: 'user_id',
-          //   width: "7%",
-        },
-        {
-          title: '名称',
-          dataIndex: 'UserName',
-          editable: false,
-          key: 'UserName',
-          dataField: 'user_name',
-          // width: "7%",
-        },
-        {
-            title: '观众数',
-            dataIndex: 'Views',
-            editable: false,
-            key: 'Views',
-            dataField: 'views',
-            sorter: (a, b) => a.Views - b.Views,
-              sortDirections: ['descend', 'ascend'],
-              ellipsis: false,
-            // width: "7%",
-        },
-        {
-          title: '标签',
-          dataIndex: 'Tags',
-          editable: false,
-          dataField: 'tags',
-          render: tags => (
-            <>
-              {
-                tags != null ?
-                  tags.map(tag => {
-                    let color = "purple";
-                    if (tag.length < 3) {
-                      color = 'green';
-                    } else if (tag.length < 6) {
-                      color = 'geekblue';
-                    } else if (tag.length < 9) {
-                      color = 'volcano';
-                    }
-      
-                    return (
-                      <Tag color={color} key={tag}>
-                        {tag}
-                      </Tag>
-                    );
-                  }
-      
-                  ) : null}
-            </>)
-        },
-        {
-          title: '粉丝数(关注)',
-          dataIndex: 'Followers',
-          key: 'Followers',
-          width: "8%",
-          dataField: 'followers',
-          sorter: (a, b) => a.Followers - b.Followers,
-          //   sortOrder: sorter.columnKey === 'Gratuity' && sorter.order,
-        sortDirections: ['descend', 'ascend'],
-        ellipsis: false,
-        },
-        {
-          title: '礼物数(币|钱)',
-          dataIndex: 'Gratuity',
-          key: 'Gratuity',
-          width: "8%",
-          dataField: 'gratuity',
-          // defaultSortOrder: 'ascend',
-         //  filterMultiple: false,
-          // onFilter: (value, record)=>{ console.log(record, value) ;return record.Gratuity >= value;},
-          sorter: (a, b) => a.Gratuity - b.Gratuity,
-        //   sortOrder: sorter.columnKey === 'Gratuity' && sorter.order,
-          sortDirections: ['descend', 'ascend'],
-          ellipsis: false,
-        },
-        {
-          title: '数据更新时间',
-          dataIndex: 'UpdateTime',
-          key: 'UpdateTime',
-          dataField: 'update_time',
-          // width: "7%",
-        },
-      ];
-
-    return (
-      <div>
-
-{/* <Row justify="start">
-      <Col span={6}>
-      <Input.Group compact size="small">
-          <Select size="small" defaultValue="operator">
-            <Option value="operator">operator</Option>
-            <Option value="uid">uid</Option>
-          </Select>
-          <Input size="small" style={{ width: '50%' }} defaultValue="123" />
-      </Input.Group>
-      </Col>
-      <Col span={6}>
-      <Input.Group compact size="small">
-          <Select size="small" defaultValue="Zhejiang">
-            <Option value="Zhejiang">Zhejiang</Option>
-            <Option value="Jiangsu">Jiangsu</Option>
-          </Select>
-          <Input size="small" style={{ width: '50%' }} defaultValue="Xihu District, Hangzhou" />
-      </Input.Group>
-      </Col>
-  </Row> */}
-
-
-
-      <Table
-        bordered={true}
-        size={"middle"}
-        columns={columns}
-        dataSource={data}
-        pagination={pagination}
-        loading={loading}
-        onChange={this.handleTableChange}
-        expandable={{
-          expandedRowRender: this.expandedRow
-        }} />
-     
-
-      </div>
-    );
-  }
-};
-
-export default DataTable;
-//

src/TableData.js

@@ -0,0 +1,233 @@
+import React from 'react';
+import { Table, Tag } from 'antd';
+import './TableData.less';
+import apihost from './Var';
+
+class TableData extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      data: [],
+      platform: "openrec",
+      pagination: {
+        current: 1,
+        pageSize: 20,
+        position: ["topLeft"],
+      },
+      loading: false,
+      filters: null,
+      sorter: null,
+    }
+  }
+
+  expandedRow = (record) => {
+
+    const ecolumns = [
+      {
+        title: 'uid',
+        dataIndex: 'Uid',
+        key: 'Uid',
+        dataField: 'uid',
+      },
+      {
+        title: '直播地址',
+        dataIndex: 'LiveUrl',
+        key: 'LiveUrl',
+        dataField: 'live_url'
+      },
+      {
+        title: '直播标题',
+        dataIndex: 'LiveTitle',
+        key: 'LiveTitle',
+        dataField: 'live_title',
+      },
+      {
+        title: '近直播开始时间',
+        dataIndex: 'LiveStartTime',
+        key: 'LiveStartTime',
+        dataField: 'live_start_time',
+      },
+      {
+        title: '近直播结束时间',
+        dataIndex: 'LiveEndTime',
+        key: 'LiveEndTime',
+        dataField: 'live_end_time',
+      },
+    ];
+
+    var data = [record];
+    return <Table rowClassName="subtable" size="small" bordered={true} columns={ecolumns} dataSource={data} pagination={false} />;
+  };
+
+  changePlatform(p) {
+    const { pagination, sorter, filters } = this.state;
+    pagination.current = 1;
+    this.setState({ platform: p }, () => {
+      this.fetchapi({
+        pagination,
+        sorter,
+        filters
+      });
+    });
+  }
+
+  componentDidMount() {
+    const { platform } = this.state;
+    this.changePlatform(platform);
+  }
+
+  handleTableChange = (pagination, filters, sorter) => {
+    this.fetchapi({
+      pagination,
+      sorter,
+      filters,
+    });
+  };
+
+  fetchapi = (params = {}) => {
+
+    const { pagination, sorter, filters } = params;
+    const { platform, } = this.state;
+    this.setState({ loading: true });
+    fetch(`${apihost}/${platform}/query?page=${pagination.current}&psize=${pagination.pageSize}${sorter ? `&orderfield=${sorter.column ? sorter.column.dataField : ""}&ordertype=${sorter.order}` : ""}`, { mode: "cors" }).then((response) => {
+      response.json().then(
+        (data) => {
+          var result = JSON.parse(data)
+          this.setState({
+            loading: false,
+            data: result.Data ? result.Data : [],
+            pagination: {
+              ...params.pagination,
+              total: 100000,
+            },
+            filters: filters,
+            sorter: sorter
+          });
+        }
+      )
+    })
+  };
+
+  render() {
+
+    let { data, pagination, loading } = this.state;
+
+    const columns = [
+      {
+        title: '平台',
+        dataIndex: 'Platform',
+        editable: false,
+        key: 'Platform',
+        //   width: "8%",
+        dataField: 'platform',
+      },
+      {
+        title: 'userid',
+        dataIndex: 'UserId',
+        editable: false,
+        key: 'UserId',
+        dataField: 'user_id',
+        //   width: "7%",
+      },
+      {
+        title: '名称',
+        dataIndex: 'UserName',
+        editable: false,
+        key: 'UserName',
+        dataField: 'user_name',
+        // width: "7%",
+      },
+      {
+        title: '观众数',
+        dataIndex: 'Views',
+        editable: false,
+        key: 'Views',
+        dataField: 'views',
+        sorter: (a, b) => a.Views - b.Views,
+        sortDirections: ['descend', 'ascend'],
+        ellipsis: false,
+        // width: "7%",
+      },
+      {
+        title: '标签',
+        dataIndex: 'Tags',
+        editable: false,
+        dataField: 'tags',
+        render: tags => (
+          <>
+            {
+              tags != null ?
+                tags.map(tag => {
+                  let color = "purple";
+                  if (tag.length < 3) {
+                    color = 'green';
+                  } else if (tag.length < 6) {
+                    color = 'geekblue';
+                  } else if (tag.length < 9) {
+                    color = 'volcano';
+                  }
+
+                  return (
+                    <Tag color={color} key={tag}>
+                      {tag}
+                    </Tag>
+                  );
+                }
+
+                ) : null}
+          </>)
+      },
+      {
+        title: '粉丝数(关注)',
+        dataIndex: 'Followers',
+        key: 'Followers',
+        width: "8%",
+        dataField: 'followers',
+        sorter: (a, b) => a.Followers - b.Followers,
+        //   sortOrder: sorter.columnKey === 'Gratuity' && sorter.order,
+        sortDirections: ['descend', 'ascend'],
+        ellipsis: false,
+      },
+      {
+        title: '礼物数(币|钱)',
+        dataIndex: 'Gratuity',
+        key: 'Gratuity',
+        width: "8%",
+        dataField: 'gratuity',
+        // defaultSortOrder: 'ascend',
+        //  filterMultiple: false,
+        // onFilter: (value, record)=>{ console.log(record, value) ;return record.Gratuity >= value;},
+        sorter: (a, b) => a.Gratuity - b.Gratuity,
+        //   sortOrder: sorter.columnKey === 'Gratuity' && sorter.order,
+        sortDirections: ['descend', 'ascend'],
+        ellipsis: false,
+      },
+      {
+        title: '数据更新时间',
+        dataIndex: 'UpdateTime',
+        key: 'UpdateTime',
+        dataField: 'update_time',
+        // width: "7%",
+      },
+    ];
+
+    return (
+      <div style={{ padding: 24, background: '#fff', minHeight: 780 }}>
+        <Table
+          bordered={true}
+          size={"middle"}
+          columns={columns}
+          dataSource={data}
+          pagination={pagination}
+          loading={loading}
+          onChange={this.handleTableChange}
+          expandable={{
+            expandedRowRender: this.expandedRow
+          }} />
+      </div>
+    );
+  }
+};
+
+export default TableData;
+//

src/TableDataTest.js

@@ -1,6 +1,5 @@
-import React, { useState } from 'react';
-import { Table, Badge, Menu, Dropdown, Space } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
+import React from 'react';
+import { Table } from 'antd';
 
 
 

src/Var.js

@@ -1,5 +1,5 @@
 
 
-var apihost = "http://192.168.16.130:5500" 
+var apihost = "http://localhost:5500" 
 
 export default apihost;

src/index.js

@@ -2,11 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+import MainRouter from './Router';
 import * as serviceWorker from './serviceWorker';
+import { Route } from 'react-router-dom';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <MainRouter />
   </React.StrictMode>,
   document.getElementById('root')
 );