finish

有些必须两次才有好体验.

src/App.js

@@ -2,14 +2,13 @@ import {
   MenuFoldOutlined, MenuUnfoldOutlined,
   DatabaseFilled
 } from '@ant-design/icons';
-import { Button, Layout, Menu, Tabs } from 'antd';
+import { Button, Layout, Menu } from 'antd';
 import 'antd/dist/antd.css';
-import React, {useRef} from 'react';
+import React from 'react';
 
 import './App.less';
 import ContentTabs from './ContentTabs'
-import TabsRoute from './Router';
- 
+
 const { Header, Content, Footer, Sider } = Layout;
 
 class App extends React.Component {
@@ -17,8 +16,6 @@ class App extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      platform: "openrec",
-      tab: "tabledata",
       collapsed: false
     }
   }
@@ -30,13 +27,12 @@ class App extends React.Component {
   };
 
   changePlatform = (p) => {
-    this.setState({platform: p})
+    // this.setState({c: p})
     this.refs.ctabs.changePlatform(p)
-
   }
 
   render() {
-    const {tab, platform } = this.state;
+
 
     return (
 
@@ -65,13 +61,13 @@ class App extends React.Component {
           </Menu>
         </Sider>
         <Layout>
-          
+
           <Header style={{ background: '#000', padding: "0" }}>
 
           </Header>
-    
+
           <Content ref="content" style={{ margin: '0 8px' }}>
-            <ContentTabs ref="ctabs" tab={tab} platform={platform}></ContentTabs>
+            <ContentTabs ref="ctabs" ></ContentTabs>
           </Content>
 
           <Footer style={{ textAlign: 'center' }}>
@@ -79,7 +75,7 @@ class App extends React.Component {
             </Footer>
         </Layout>
       </Layout>
-  
+
     );
   }
 }

src/ChartsCount.js

@@ -100,7 +100,6 @@ class ChartsCount extends React.Component {
 
     updateData = (params = {}) => {
 
-        // const {platform, countkey, title} = params
         const platform = params.platform?params.platform:this.state.platform
         const countkey = params.countkey?params.countkey:this.state.countkey
         const title = params.title?params.title:this.state.title
@@ -119,12 +118,15 @@ class ChartsCount extends React.Component {
                         var ins = this.echarts_react.getEchartsInstance();
                         ins.setOption(getOption(this.state));
                     });
-
                 });
             }
         )
     };
 
+    componentDidMount() {
+        this.updateData()
+    }
+
     countMethod(countkey, title) {
         this.updateData({countkey: countkey, title: title});
     }

src/ContentTabs.js

@@ -1,6 +1,6 @@
 
-import React  from 'react';
-import { Button, Layout, Menu, Tabs } from 'antd';
+import React from 'react';
+import { Tabs } from 'antd';
 import ChartsCount from './ChartsCount';
 import TableData from './TableData';
 
@@ -11,66 +11,65 @@ class ContentTabs extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      platform: this.props.platform,
-      tab: this.props.tab,
+      platform: "openrec", // default openrec
+      tab: "tabledata",// default tabledata
     }
   }
 
   count = 1
 
-    componentDidMount() {
-    
-    }
+  componentDidMount() {
 
-    changeTab = (tab) => {
-      this.updateDate({tab: tab}) 
-    }
+  }
 
-    updateDate(params = {}) {
+  changeTab = (tab) => {
+    this.updateDate({ tab: tab })
+  }
 
-      const platform = params.platform?params.platform:this.state.platform
-      const tab = params.tab?params.tab:this.state.tab
-      this.setState({platform: platform, tab:tab});
-      
-      switch(tab) {
-        case "tabledata":
-          if (this.refs.tabledata) {
+  updateDate(params = {}) {
+
+    const platform = params.platform ? params.platform : this.state.platform;
+    const tab = params.tab ? params.tab : this.state.tab;
+    this.setState({ platform: platform, tab: tab });
+
+    switch (tab) {
+      case "tabledata":
+        if (this.refs.tabledata) {
           this.refs.tabledata.changePlatform(platform);
         }
         break;
 
-        case "chartscount":
-          if (this.refs.chartscount) {
-            this.refs.chartscount.changePlatform(platform);
-          }
+      case "chartscount":
+        if (this.refs.chartscount) {
+          this.refs.chartscount.changePlatform(platform);
+        }
         break;
-          default:
-      }
+      default:
     }
 
-    changePlatform = (platform) => {
-      this.updateDate({platform: platform})
-    }
+  }
 
-    render()  {
-      this.count ++
-      return (
+  changePlatform = (platform) => {
+    this.updateDate({ platform: platform });
+  }
 
-    <Tabs 
-    onChange={  
-      this.changeTab
-    } >
+  render() {
+    return (
+      <Tabs
+        onChange={
+          this.changeTab
+        } >
 
-    <TabPane tab="数据表格" key="tabledata">
-      <TableData ref="tabledata" platform={this.state.platform}  ></TableData>
-    </TabPane>
+        <TabPane tab="数据表格" key="tabledata">
+          <TableData ref="tabledata" platform={this.state.platform}  ></TableData>
+        </TabPane>
 
-    <TabPane tab="tag统计" key="chartscount">
-       <ChartsCount ref="chartscount" platform={this.state.platform} ></ChartsCount>
-    </TabPane>
-  </Tabs>
-        )
-    }
+        <TabPane tab="tag统计" key="chartscount">
+          <ChartsCount ref="chartscount" platform={this.state.platform} ></ChartsCount>
+        </TabPane>
+      </Tabs>
+    )
+  }
 }
 
 

src/Router.js

@@ -1,37 +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, Result } from 'antd';
-
-const { TabPane } = Tabs;
+import { Route, Switch, BrowserRouter } from 'react-router-dom';
+import { Button, Result } from 'antd';
 
 
-const MainRouter = () => {  
+
+const MainRouter = () => {
 
     return (
         <BrowserRouter>
             <Switch>
                 <Route exact path="/" component={
-                    App 
+                    App
                 } />
-              
 
-                <Route exact path="/*" render={ () => {
+
+                <Route exact path="/*" render={() => {
                     return <Result
-                    status="404"
-                    title="404"
-                    subTitle="Sorry, the page you visited does not exist."
-                    extra={<Button type="primary" href="/">Back Home</Button>}
-                  />
+                        status="404"
+                        title="404"
+                        subTitle="Sorry, the page you visited does not exist."
+                        extra={<Button type="primary" href="/">Back Home</Button>}
+                    />
                 }} />
-               
+
             </Switch>
         </BrowserRouter>
-         )
-    
+    )
+
 };
 
 

src/index.js

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