TODO:解决遮罩的问题. mask
This commit is contained in:
eson
parent
b0d95d4561
commit
b5ef817609
63
src/Home.js
63
src/Home.js
|
|
@ -3,16 +3,16 @@
|
|||
import {
|
||||
MenuFoldOutlined, MenuUnfoldOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { Anchor, Button, Image, Layout, Menu } from 'antd';
|
||||
import { Affix, Anchor, Button, Image, Layout, Menu } from 'antd';
|
||||
import React from 'react';
|
||||
import { HashRouter, Link, Route, Switch } from 'react-router-dom';
|
||||
import { BrowserRouter, HashRouter, Link, Route, Switch } from 'react-router-dom';
|
||||
import Playerduo from './pages/playerduo.js';
|
||||
import playerduo_logo from "./pages/playerduo_logo.svg";
|
||||
|
||||
|
||||
|
||||
const { Header, Sider, Content } = Layout;
|
||||
|
||||
|
||||
|
||||
class Home extends React.Component {
|
||||
state = {
|
||||
|
|
@ -26,7 +26,7 @@ class Home extends React.Component {
|
|||
};
|
||||
|
||||
render() {
|
||||
console.log(window.location.hash);
|
||||
console.log(window.location.pathname);
|
||||
return (
|
||||
|
||||
<Layout style={{ background: "#e7e7e7", minHeight: '90vh' }} >
|
||||
|
|
@ -36,62 +36,31 @@ class Home extends React.Component {
|
|||
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
|
||||
</Button>
|
||||
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={[window.location.hash ? window.location.hash : "1"]}>
|
||||
|
||||
{/* <Menu.Item key="1" icon={<UserOutlined />}>
|
||||
nav 1
|
||||
<HashRouter>
|
||||
<Link to="/"></Link>
|
||||
</HashRouter>
|
||||
</Menu.Item> */}
|
||||
<Menu.Item key="#/playerduo" title="playerduo" icon={<Image width={32} height={32} src={playerduo_logo}></Image>}>
|
||||
|
||||
<HashRouter>
|
||||
<Link to={{ pathname: "/playerduo" }}></Link>
|
||||
</HashRouter>
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={[window.location.pathname]}>
|
||||
<Menu.Item key="/playerduo" title="playerduo" icon={<Image width={32} height={32} src={playerduo_logo}></Image>}>
|
||||
<Link to={{ pathname: "/playerduo" }}></Link>
|
||||
</Menu.Item>
|
||||
{/* <Menu.Item key="3" icon={<UploadOutlined />}>
|
||||
nav 3
|
||||
</Menu.Item> */}
|
||||
|
||||
</Menu>
|
||||
|
||||
</Sider>
|
||||
<Layout >
|
||||
<HashRouter>
|
||||
<Switch>
|
||||
<Route exact path="/playerduo" render={()=>{return <Header style={{ background: "#e7e7e7", height: "48px" }}>
|
||||
<Anchor onClick={(e,link)=>{
|
||||
window.location.hash = "playerduo";
|
||||
console.log(e, link);
|
||||
}} onChange={(e)=>{
|
||||
e = window.location.hash;
|
||||
console.log(e, window.location.hash);
|
||||
}} style={{width:"100%"}}>
|
||||
<Anchor.Link title="player-monery"></Anchor.Link>
|
||||
</Anchor>
|
||||
</Header>}} >
|
||||
</Route>
|
||||
<Route exact path="/" >
|
||||
< Header style={{ background: "#e7e7e7", height: "42px" }}>
|
||||
</Header>
|
||||
</Route>
|
||||
</Switch>
|
||||
</HashRouter>
|
||||
|
||||
|
||||
|
||||
|
||||
<Content
|
||||
style={{
|
||||
background: "#e7e7e7",
|
||||
marginTop: "2px",
|
||||
minHeight: '80vh',
|
||||
}}
|
||||
>
|
||||
|
||||
<HashRouter>
|
||||
<Switch>
|
||||
<Route exact path="/playerduo" component={Playerduo} />
|
||||
</Switch>
|
||||
</HashRouter>
|
||||
|
||||
|
||||
<Switch>
|
||||
<Route exact path="/playerduo" component={Playerduo} />
|
||||
</Switch>
|
||||
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { HashRouter, Route, Switch,BrowserRouter } from 'react-router-dom';
|
||||
import { HashRouter, Route, Switch,BrowserRouter, Redirect } from 'react-router-dom';
|
||||
import Home from './Home';
|
||||
|
||||
class HomeRouter extends React.Component {
|
||||
|
|
@ -8,7 +8,10 @@ class HomeRouter extends React.Component {
|
|||
return (
|
||||
<BrowserRouter>
|
||||
<Switch>
|
||||
<Route exact path="/" component={Home}/>
|
||||
|
||||
{/* <Route path="/" component={Home}/> */}
|
||||
<Route exact path="/:name" component={Home}/>
|
||||
<Redirect from="/" to="/playerduo" />
|
||||
</Switch>
|
||||
</BrowserRouter>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ class Trend extends React.Component {
|
|||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// position: function (pt) {
|
||||
// console.log(pt);
|
||||
// // console.log(pt);
|
||||
// return [pt[0], '10%'];
|
||||
// }
|
||||
},
|
||||
|
|
@ -86,6 +86,10 @@ class Trend extends React.Component {
|
|||
xAxis: {
|
||||
type: 'time',
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
|
||||
interval: interval,
|
||||
// data: tsdata
|
||||
axisLabel: {
|
||||
|
|
@ -112,25 +116,28 @@ class Trend extends React.Component {
|
|||
}
|
||||
|
||||
}
|
||||
},
|
||||
axisPointer: {
|
||||
snap: true
|
||||
}
|
||||
},
|
||||
dataZoom: [{
|
||||
type: 'inside',
|
||||
start: 0,
|
||||
end: 100
|
||||
}, {
|
||||
start: 0,
|
||||
end: 100,
|
||||
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||||
handleSize: '0%',
|
||||
handleStyle: {
|
||||
color: '#fff',
|
||||
shadowBlur: 3,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.8)',
|
||||
shadowOffsetX: 2,
|
||||
shadowOffsetY: 2
|
||||
}
|
||||
}],
|
||||
// dataZoom: [{
|
||||
// type: 'inside',
|
||||
// start: 0,
|
||||
// end: 100
|
||||
// }, {
|
||||
// start: 0,
|
||||
// end: 100,
|
||||
// handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
||||
// handleSize: '0%',
|
||||
// handleStyle: {
|
||||
// color: '#fff',
|
||||
// shadowBlur: 3,
|
||||
// shadowColor: 'rgba(0, 0, 0, 0.8)',
|
||||
// shadowOffsetX: 2,
|
||||
// shadowOffsetY: 2
|
||||
// }
|
||||
// }],
|
||||
series: [
|
||||
]
|
||||
};
|
||||
|
|
@ -184,7 +191,7 @@ class Trend extends React.Component {
|
|||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
sampling: 'average',
|
||||
// sampling: 'average',
|
||||
areaStyle: {
|
||||
},
|
||||
data: tvalues
|
||||
|
|
@ -221,7 +228,7 @@ class Trend extends React.Component {
|
|||
}
|
||||
|
||||
selectRangeDate(start, end) {
|
||||
|
||||
|
||||
if(this.props.trendurl) {
|
||||
var qstart, qend;
|
||||
if(this.props.query) {
|
||||
|
|
@ -257,9 +264,9 @@ class Trend extends React.Component {
|
|||
const { datetype, rangetype } = this.props;
|
||||
const { data, type } = this.state;
|
||||
return (
|
||||
<div style={{height: "100%"}}>
|
||||
<div id={this.props.id?this.props.id:undefined} style={{height: "100%", pointerEvents: "inherit"}}>
|
||||
<Row style={{marginLeft: "6%", marginBottom: "10px"}}>
|
||||
{ (() => { if(datetype) return <Button onClick={ () => this.selectDate(defaultDateFormat(new Date()))} >今天</Button>})() }
|
||||
{ (() => { if(datetype) return <Button onClick={ () => this.selectDate(defaultDateFormat(new Date()))} >今天</Button>})() }
|
||||
{ (() => { if(rangetype) return <Button onClick={ () => {this.selectLately(7);} }>7天</Button> })() }
|
||||
{ (() => { if(rangetype) return <Button onClick={ () => {this.selectLately(30);} }>30天</Button> })() }
|
||||
{ (() => { if(datetype) return <DatePicker onChange = {(moment, daterange) => { this.selectDate(daterange); }} size="small" style={{marginLeft: "5px"}} /> } )()}
|
||||
|
|
|
|||
79
src/component/anchor.js
Normal file
79
src/component/anchor.js
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import { Affix, Button, Card, Col, Row, Space } from 'antd';
|
||||
import { Header } from 'antd/lib/layout/layout';
|
||||
import React from 'react';
|
||||
import './anchor.less';
|
||||
|
||||
//
|
||||
class Anchor extends React.Component {
|
||||
state = {
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
var rstyle = {
|
||||
pointerEvents: "visibleStroke",
|
||||
}
|
||||
return (
|
||||
<Affix className="datagod-anchor" >
|
||||
<Row justify="end" style={{pointerEvents: "visibleStroke"}} >
|
||||
|
||||
<Button className="datagod-anchor-button" type="link" >
|
||||
<a href="#player-online" >在线</a>
|
||||
</Button>
|
||||
|
||||
|
||||
|
||||
|
||||
</Row>
|
||||
<Row justify="end" style={rstyle} >
|
||||
<Button className="datagod-anchor-button" type="link" >
|
||||
<a href="#player-statement" >钱在线</a>
|
||||
</Button>
|
||||
</Row>
|
||||
<Row justify="end" style={rstyle} >
|
||||
<Button className="datagod-anchor-button" type="link" >
|
||||
<a href="#player-statement" >钱在线</a>
|
||||
</Button>
|
||||
</Row>
|
||||
<Row justify="end" style={rstyle} >
|
||||
<Button className="datagod-anchor-button" type="link" >
|
||||
<a href="#player-statement" >钱在线</a>
|
||||
</Button>
|
||||
</Row>
|
||||
<Row justify="end" style={rstyle} >
|
||||
<Button className="datagod-anchor-button" type="link" >
|
||||
<a href="#player-statement" >钱在线</a>
|
||||
</Button>
|
||||
</Row>
|
||||
<Row justify="end" style={rstyle} >
|
||||
<Button className="datagod-anchor-button" type="link" >
|
||||
<a href="#player-statement" >钱在线</a>
|
||||
</Button>
|
||||
</Row>
|
||||
<Row justify="end" style={rstyle} >
|
||||
<Button className="datagod-anchor-button" type="link" >
|
||||
<a href="#player-statement" >钱在线</a>
|
||||
</Button>
|
||||
</Row>
|
||||
<Row justify="end" style={rstyle} >
|
||||
<Button className="datagod-anchor-button" type="link" >
|
||||
<a href="#player-statement" >钱在线</a>
|
||||
</Button>
|
||||
</Row>
|
||||
<Row justify="end" style={rstyle} >
|
||||
<Button className="datagod-anchor-button" type="link" >
|
||||
<a href="#player-statement" >钱在线</a>
|
||||
</Button>
|
||||
</Row>
|
||||
<Row justify="end" style={rstyle} >
|
||||
<Button className="datagod-anchor-button" type="link" >
|
||||
<a href="#player-statement" >钱在线</a>
|
||||
</Button>
|
||||
</Row>
|
||||
</Affix>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default Anchor;
|
||||
14
src/component/anchor.less
Normal file
14
src/component/anchor.less
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
|
||||
|
||||
.datagod-anchor {
|
||||
height: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.datagod-anchor-button {
|
||||
text-align: right;
|
||||
color: rgb(0, 156, 156);
|
||||
:hover{
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
import { Card, Col, Row, Statistic } from 'antd';
|
||||
import Layout from 'antd/lib/layout/layout';
|
||||
import { Affix, Card, Col, Row, Statistic, Layout, Sider} from 'antd';
|
||||
|
||||
|
||||
import React from 'react';
|
||||
import Trend from '../charts/Trend.js';
|
||||
import Anchor from '../component/anchor.js';
|
||||
import config from '../Config.js';
|
||||
|
||||
|
||||
|
|
@ -15,11 +17,24 @@ class Playerduo extends React.Component {
|
|||
render() {
|
||||
|
||||
return (
|
||||
|
||||
<Layout>
|
||||
<StatisticBoard></StatisticBoard>
|
||||
<Trend id="player-monery" datetype={false} trendurl={config.count_statement}></Trend>
|
||||
<Trend trendurl={config.trend_online}></Trend>
|
||||
|
||||
<Anchor>
|
||||
|
||||
</Anchor>
|
||||
|
||||
<StatisticBoard>
|
||||
|
||||
</StatisticBoard>
|
||||
|
||||
<Trend id="player-statement" datetype={false} trendurl={config.count_statement}></Trend>
|
||||
<Trend id="player-online" trendurl={config.trend_online}></Trend>
|
||||
|
||||
</Layout>
|
||||
|
||||
|
||||
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -67,7 +82,7 @@ class StatisticBoard extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Layout style={{ padding: 8, width: "100%" }}>
|
||||
<Layout style={{ width: "100%" }}>
|
||||
<Row justify="center" gutter={[24, 16]} >
|
||||
{SimpleCard("陪玩者总数", this.state.player_count, "人")}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user