From 23171e6cbf2999375321e7a8e25983b5deae95e3 Mon Sep 17 00:00:00 2001 From: eson Date: Tue, 1 Sep 2020 18:34:15 +0800 Subject: [PATCH] =?UTF-8?q?TODO:=20=E8=A7=A3=E5=86=B3=E5=A4=9A=E6=AC=A1?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.js | 82 ++++++++-------------------------------------- src/ChartsCount.js | 25 +++++++------- src/ContentTabs.js | 75 ++++++++++++++++++++++++++++++++++++++++++ src/Router.js | 21 +++++++----- src/index.js | 9 ++--- 5 files changed, 118 insertions(+), 94 deletions(-) create mode 100644 src/ContentTabs.js diff --git a/src/App.js b/src/App.js index af53e93..c32aee4 100644 --- a/src/App.js +++ b/src/App.js @@ -6,14 +6,10 @@ import { Button, Layout, Menu, Tabs } from 'antd'; import 'antd/dist/antd.css'; import React, {useRef} from 'react'; - import './App.less'; -import ChartsCount from './ChartsCount'; -import TableData from './TableData'; +import ContentTabs from './ContentTabs' import TabsRoute from './Router'; -import { Link, Route, Router, HashRouter, Switch, useHistory } from 'react-router-dom'; - -const { TabPane } = Tabs; + const { Header, Content, Footer, Sider } = Layout; class App extends React.Component { @@ -22,14 +18,11 @@ class App extends React.Component { super(props) this.state = { platform: "openrec", - collapsed: false, - tkey: "content_table", - location: null, + tab: "tabledata", + collapsed: false } } - - toggleCollapsed = () => { this.setState({ collapsed: !this.state.collapsed, @@ -37,17 +30,17 @@ class App extends React.Component { }; changePlatform = (p) => { - // this.setState({ platform: p }); - // if (this.chartscount && this.chartscount.state.platform !== p) { - // this.chartscount.changePlatform(p) - // } - // this.tabledata.changePlatform(p); + this.setState({platform: p}, () => { + this.refs.ctabs.changePlatform(this.state.platform); + }) + } render() { + const {tab, platform } = this.state; + return ( - - + - - { - const history = useHistory(); - - const { platform } = this.state; - this.setState({ key: e }) - - switch (e) { - case "content_table": - history.push("#/data") - // this.props.history.push("#/data") - if (this.refs.ctable) { - this.refs.ctable.changePlatform(platform); - } - break; - case "tag_count": - history.push("#/count") - // this.props.history.push("#/count") - if (this.refs.tcharts) { - this.refs.tcharts.changePlatform(platform); - } - break - default: - break; - } - - }} > - - - - - - - - { - return - }} > - - - - { - return - }} > - - - - +
@@ -134,11 +80,9 @@ class App extends React.Component {
- + ); } } -// ReactDOM.render(, mountNode); - export default App; \ No newline at end of file diff --git a/src/ChartsCount.js b/src/ChartsCount.js index c93a7a2..3952379 100644 --- a/src/ChartsCount.js +++ b/src/ChartsCount.js @@ -83,7 +83,7 @@ function getOption(state = {}) { class ChartsCount extends React.Component { - constructor(props) { + constructor(props) { // platform super(props) this.state = { option: {}, @@ -94,20 +94,23 @@ class ChartsCount extends React.Component { } } - changePlatform = (p) => { - this.setState({ platform: p }, () => { - this.updateData(); - }); + changePlatform = (platform) => { + this.updateData({ platform: platform, countkey: this.state.countkey }) }; - updateData = () => { - const { countkey, platform } = this.state; - fetch(`${apihost}/tag/count?platform=${platform}&countkey=${countkey}`, { + updateData = (params = {}) => { + + const {platform, countkey, title} = params + + fetch(`${apihost}/tag/count?platform=${platform?platform:this.state.platform}&countkey=${countkey?countkey:this.state.countkey}`, { "mode": "cors" }).then( response => { response.json().then(value => { this.setState({ + title: title?title:this.state.title, + platform: platform?platform:this.state.platform, + countkey: countkey?countkey:this.state.countkey, data: parseData(value) }, () => { var ins = this.echarts_react.getEchartsInstance(); @@ -119,12 +122,8 @@ class ChartsCount extends React.Component { ) }; - componentDidMount() { - this.updateData(); - } - countMethod(countkey, title) { - this.setState({ countkey: countkey, title: title }, () => { this.updateData() }); + this.updateData({countkey: countkey, title: title}); } render() { diff --git a/src/ContentTabs.js b/src/ContentTabs.js new file mode 100644 index 0000000..d0c0a72 --- /dev/null +++ b/src/ContentTabs.js @@ -0,0 +1,75 @@ + +import React from 'react'; +import { Button, Layout, Menu, Tabs } from 'antd'; +import ChartsCount from './ChartsCount'; +import TableData from './TableData'; + +const { TabPane } = Tabs; + +class ContentTabs extends React.Component { + + constructor(props) { + super(props) + this.state = { + platform: this.props.platform, + tab: this.props.tab, + count: 1, + } + } + + count = 1 + + componentDidMount() { + + } + + changeTab = (tab) => { + this.setState({tab: tab}, ()=>{ this.updateDate() }) + } + + updateDate() { + + switch(this.state.tab) { + case "tabledata": + if (this.refs.tabledata) { + this.refs.tabledata.changePlatform(this.state.platform); + } + break; + + case "chartscount": + if (this.refs.chartscount) { + this.refs.chartscount.changePlatform(this.state.platform); + } + break; + + default: + } + } + + changePlatform = (platform) => { + this.setState({platform: platform}, ()=>{ this.updateDate()}) + } + + render() { + this.count ++ + return ( + + + + + + + + + + + + ) + } +} + + +export default ContentTabs; \ No newline at end of file diff --git a/src/Router.js b/src/Router.js index 067c886..a076eac 100644 --- a/src/Router.js +++ b/src/Router.js @@ -4,7 +4,7 @@ import { HashRouter, Route, Switch, BrowserRouter, Redirect } from 'react-router import TableData from "./TableData"; import ChartsCount from "./ChartsCount"; import { Link } from 'react-router-dom'; -import { Button, Layout, Menu, Tabs } from 'antd'; +import { Button, Layout, Menu, Tabs, Result } from 'antd'; const { TabPane } = Tabs; @@ -14,15 +14,20 @@ const MainRouter = () => { return ( - {/* */} - - - + } /> + + + { + return Back Home} + /> + }} /> + ) diff --git a/src/index.js b/src/index.js index e226e94..8fa05ff 100644 --- a/src/index.js +++ b/src/index.js @@ -1,15 +1,16 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import App from './App'; +import App from './Router'; import MainRouter from './Router'; import * as serviceWorker from './serviceWorker'; import { Route } from 'react-router-dom'; ReactDOM.render( - - - , + , + // + // + // , document.getElementById('root') );