From b5ef81760955365d4a725f9e198787458a06e379 Mon Sep 17 00:00:00 2001 From: eson Date: Tue, 8 Dec 2020 19:03:51 +0800 Subject: [PATCH] =?UTF-8?q?TODO:=E8=A7=A3=E5=86=B3=E9=81=AE=E7=BD=A9?= =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98.=20mask?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Home.js | 63 ++++++++----------------------- src/Router.js | 7 +++- src/charts/Trend.js | 51 ++++++++++++++----------- src/component/anchor.js | 79 +++++++++++++++++++++++++++++++++++++++ src/component/anchor.less | 14 +++++++ src/pages/playerduo.js | 27 ++++++++++--- 6 files changed, 164 insertions(+), 77 deletions(-) create mode 100644 src/component/anchor.js create mode 100644 src/component/anchor.less diff --git a/src/Home.js b/src/Home.js index 92e0477..61f00cb 100644 --- a/src/Home.js +++ b/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 ( @@ -36,62 +36,31 @@ class Home extends React.Component { {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)} - - - {/* }> - nav 1 - - - - */} - }> - - - - + + }> + - {/* }> - nav 3 - */} - - - - {return
- { - window.location.hash = "playerduo"; - console.log(e, link); - }} onChange={(e)=>{ - e = window.location.hash; - console.log(e, window.location.hash); - }} style={{width:"100%"}}> - - -
}} > - - - < Header style={{ background: "#e7e7e7", height: "42px" }}> - - - - + + + - - - - - + + + + + + diff --git a/src/Router.js b/src/Router.js index 89b309a..e05e3de 100644 --- a/src/Router.js +++ b/src/Router.js @@ -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 ( - + + {/* */} + + ) diff --git a/src/charts/Trend.js b/src/charts/Trend.js index 6d5badd..634bb48 100644 --- a/src/charts/Trend.js +++ b/src/charts/Trend.js @@ -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 ( -
+
- { (() => { if(datetype) return })() } + { (() => { if(datetype) return })() } { (() => { if(rangetype) return })() } { (() => { if(rangetype) return })() } { (() => { if(datetype) return { this.selectDate(daterange); }} size="small" style={{marginLeft: "5px"}} /> } )()} diff --git a/src/component/anchor.js b/src/component/anchor.js new file mode 100644 index 0000000..17b6a49 --- /dev/null +++ b/src/component/anchor.js @@ -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 ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) + } +} + + +export default Anchor; \ No newline at end of file diff --git a/src/component/anchor.less b/src/component/anchor.less new file mode 100644 index 0000000..ee2570a --- /dev/null +++ b/src/component/anchor.less @@ -0,0 +1,14 @@ + + +.datagod-anchor { + height: 0; + right: 0; +} + +.datagod-anchor-button { + text-align: right; + color: rgb(0, 156, 156); + :hover{ + + } +} \ No newline at end of file diff --git a/src/pages/playerduo.js b/src/pages/playerduo.js index 25fbca1..d34de3a 100644 --- a/src/pages/playerduo.js +++ b/src/pages/playerduo.js @@ -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 ( + - - - + + + + + + + + + + + + + + + ) } } @@ -67,7 +82,7 @@ class StatisticBoard extends React.Component { render() { return ( - + {SimpleCard("陪玩者总数", this.state.player_count, "人")}