eson/datagod
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

TODO: 解决锚点错误. 选择新组件.

Browse Source
This commit is contained in:
eson 2020-12-07 18:06:24 +08:00
parent 40fa485dfc
commit b0d95d4561
6 changed files with 95 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/Config.js
View File

@ -6,7 +6,8 @@ var config = {
trend_all : `${host}/api/data`,
trend_online: `${host}/api/data/online`, // 在线人数api
count_player: `${host}/api/count/player`, // 在线人数api
count_player: `${host}/api/count/current/player`, // 总人数api
count_playerstatus: `${host}/api/count/current/playerstatus`, // 总陪玩者现在状态api
count_statement: `${host}/api/count/statement`, // 在线人数api
}

48
src/Home.js
View File

@ -1,27 +1,18 @@
import React from 'react';
import { Button, Image, Layout, Menu } from 'antd';
// import Icon from '@ant-design/compatible';
import Icon from '@ant-design/icons';
import {
MenuUnfoldOutlined,
MenuFoldOutlined,
UserOutlined,
VideoCameraOutlined,
UploadOutlined,
MenuFoldOutlined, MenuUnfoldOutlined
} from '@ant-design/icons';
import { Anchor, Button, Image, Layout, Menu } from 'antd';
import React from 'react';
import { HashRouter, Link, Route, Switch } from 'react-router-dom';
import config from './Config.js';
import Trend from './charts/Trend';
import { ConfigConsumer } from 'antd/lib/config-provider';
import Playerduo from './pages/playerduo.js';
import playerduo_logo from "./pages/playerduo_logo.svg";
import { IconMap } from 'antd/lib/result';
const { Header, Sider, Content } = Layout;
class Home extends React.Component {
state = {
@ -53,8 +44,8 @@ class Home extends React.Component {
<Link to="/"></Link>
</HashRouter>
</Menu.Item> */}
<Menu.Item key="#/playerduo" title="playerduo" icon={ <Image width={32} height={32} src={playerduo_logo}></Image> }>
<Menu.Item key="#/playerduo" title="playerduo" icon={<Image width={32} height={32} src={playerduo_logo}></Image>}>
<HashRouter>
<Link to={{ pathname: "/playerduo" }}></Link>
</HashRouter>
@ -67,8 +58,27 @@ class Home extends React.Component {
</Sider>
<Layout >
<Header style={{ background: "#e7e7e7", height: "42px" }}>
</Header>
<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",
@ -79,7 +89,7 @@ class Home extends React.Component {
<HashRouter>
<Switch>
<Route exact path="/playerduo" component={ Playerduo } />
<Route exact path="/playerduo" component={Playerduo} />
</Switch>
</HashRouter>
</Content>

1
src/Router.js
View File

@ -9,7 +9,6 @@ class HomeRouter extends React.Component {
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home}/>
</Switch>
</BrowserRouter>
)

2
src/charts/Base.js
View File

@ -30,5 +30,5 @@ const TrendType = {
RangeDate: 2,
}
export {TrendType, dateFormat, defaultDateFormat};
export { TrendType, dateFormat, defaultDateFormat };

25
src/charts/Trend.js
View File

@ -1,12 +1,8 @@
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import React from 'react';
import { Button, DatePicker, Row } from 'antd';
import zhCN from 'antd/es/locale/zh_CN'; // 引入中文包
import {dateFormat, defaultDateFormat, TrendType} from './Base.js';
import config from '../Config.js';
import { convertLegacyProps } from 'antd/lib/button/button';
import {defaultDateFormat, TrendType} from './Base.js';
const { RangePicker } = DatePicker;
@ -31,7 +27,7 @@ class Trend extends React.Component {
};
componentDidMount() {
console.log(this.props);
// console.log(this.props);
if(this.props.datetype) {
var now = new Date()
this.selectDate( defaultDateFormat(now) )
@ -46,18 +42,20 @@ class Trend extends React.Component {
var fm ;
if(trendtype.current === TrendType.OneDate) {
interval = 3600 * 1000;
fm = function (value, index) {
fm = function (value) {
var tp = new Date(value)
return tp.getHours()
};
} else {
interval = 3600 * 1000 * 24;
fm = function (value, index) {
fm = function (value) {
var tp = new Date(value)
return (tp.getMonth() + 1) + "-" + tp.getDate()
};
}
var title = "趋势";
var title_concat = [];
var option = {
tooltip: {
trigger: 'axis',
@ -68,7 +66,7 @@ class Trend extends React.Component {
},
title: {
left: 'center',
text: '趋势数据',
text: title,
},
legend: {
orient: 'vertical',
@ -102,7 +100,7 @@ class Trend extends React.Component {
padding: [10,0,0,0],
boundaryGap: [0, '100%'],
axisLabel: {
formatter: function (value, index) {
formatter: function (value) {
if( typeof value == "number") {
if(value >= 100000000) {
return (value / 100000000).toFixed(4) + "亿"
@ -159,7 +157,6 @@ class Trend extends React.Component {
tvalues.sort();
if(trendtype.current === TrendType.OneDate) {
var last = new Date(tvalues[tvalues.length-1][0]);
last.setMinutes(0);
last.setSeconds(0);
@ -178,6 +175,7 @@ class Trend extends React.Component {
}
title_concat.push(d.name);
option.legend.data.push(d.name);
option.yAxis.name = unit;
@ -194,6 +192,7 @@ class Trend extends React.Component {
option.series.push(sdata)
}
option.title.text = title + `(${title_concat.join(",")})`
return option;
}
@ -222,8 +221,8 @@ class Trend extends React.Component {
}
selectRangeDate(start, end) {
if(this.props.trendurl) {
var qstart, qend;
if(this.props.query) {
qstart = this.props.query.start?this.props.query.start:"start";
@ -271,7 +270,7 @@ class Trend extends React.Component {
notMerge={true}
lazyUpdate={true}
option={this.getOption(type, data)}
style={{ width: "100%", minHeight: "90vh" }}
style={{ width: "100%", minHeight: "90vh", marginBottom: "50px" }}
/>
</ div>

83
src/pages/playerduo.js
View File

@ -1,40 +1,24 @@
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';
import React from 'react';
import { Button, Card, Col, DatePicker, Row, Statistic } from 'antd';
import config from '../Config.js';
import { Card, Col, Row, Statistic } from 'antd';
import Layout from 'antd/lib/layout/layout';
import React from 'react';
import Trend from '../charts/Trend.js';
import config from '../Config.js';
const SimpleCard = (title, value) => {
return (
<Col span={4}>
<Card style={{width: 200, height: 100, scale: 0.8}}>
<Statistic title={title} value={value} suffix="人"></Statistic>
</Card>
</Col>
)
}
// Playerduo 陪玩者
class Playerduo extends React.Component {
state = {
}
render() {
return (
<Layout>
<StatisticBoard></StatisticBoard>
<div style={{marginBottom: 100}}>
<Trend datetype={false} trendurl={config.count_statement}></Trend>
</div >
<div style={{marginBottom: 100}}>
<Trend trendurl={config.trend_online}></Trend>
</div>
<Trend id="player-monery" datetype={false} trendurl={config.count_statement}></Trend>
<Trend trendurl={config.trend_online}></Trend>
</Layout>
)
}
@ -43,19 +27,38 @@ class Playerduo extends React.Component {
class StatisticBoard extends React.Component {
state = {
player_count: 0
player_count: 0,
player_status: {
ready: 0,
busy: 0,
stop: 0,
none: 0,
}
}
componentDidMount() {
this.getPlayerCount();
this.getPlayerStatus();
}
getPlayerCount() {
fetch(config.count_player).then((response)=>{
getPlayerStatus() {
fetch(config.count_playerstatus).then((response) => {
if (response.ok) {
response.json().then((response) => {
if (response.code === 0) {
this.setState({ player_count: response.data.count })
this.setState({ player_status: response.data.status })
}
})
}
})
}
getPlayerCount() {
fetch(config.count_player).then((response) => {
if (response.ok) {
response.json().then((response) => {
if (response.code === 0) {
this.setState({ player_count: response.data.count })
}
})
}
@ -64,15 +67,31 @@ class StatisticBoard extends React.Component {
render() {
return (
<Layout style={{padding: 8, width:"100%"}}>
<Row justify="center" gutter={[24,16]} >
{SimpleCard("陪玩者总数", this.state.player_count)}
{/* {SimpleCard("陪玩", 1)} */}
<Layout style={{ padding: 8, width: "100%" }}>
<Row justify="center" gutter={[24, 16]} >
{SimpleCard("陪玩者总数", this.state.player_count, "人")}
</Row>
<Row justify="center" gutter={[24, 16]} >
{SimpleCard("陪玩者(ready)", this.state.player_status.ready, "人")}
{SimpleCard("陪玩者(busy)", this.state.player_status.busy, "人")}
{SimpleCard("陪玩者(stop)", this.state.player_status.stop, "人")}
{SimpleCard("陪玩者(none)", this.state.player_status.none, "人")}
</Row>
</Layout>
)
}
}
const SimpleCard = (title, value, suffix) => {
return (
<Col span={4}>
<Card style={{ width: 150, height: 100 }}>
<Statistic title={title} value={value} suffix={suffix}></Statistic>
</Card>
</Col>
)
}
export default Playerduo;