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

完成基础数据报表.

Browse Source
This commit is contained in:
eson 2020-12-03 19:49:04 +08:00
parent f14e69c6bd
commit 017ad98a3f
7 changed files with 171 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.less
View File

@ -35,6 +35,10 @@
background-color: #dddddd;
}
.ant-statistic-title {
color: rgba(0, 0, 0, 0.6)
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);

6
src/Config.js
View File

@ -1,8 +1,12 @@
var host = "http://192.168.17.208:6123"
var config = {
trendurl : "http://localhost:6123/api/data"
trend_all : `${host}/api/data`,
trend_online: `${host}/api/data/online`, // 在线人数api
count_player: `${host}/api/count/player`, // 在线人数api
}
export default config;

8
src/Home.js
View File

@ -10,7 +10,11 @@ import {
} from '@ant-design/icons';
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';
const { Header, Sider, Content } = Layout;
@ -64,15 +68,13 @@ class Home extends React.Component {
style={{
background: "#e7e7e7",
marginTop: "2px",
minHeight: '80vh',
}}
>
<HashRouter>
<Switch>
<Route exact path="/playerduo" component={Trend} />
<Route exact path="/playerduo" component={ Playerduo } />
</Switch>
</HashRouter>
</Content>

109
src/charts/Trend.js
View File

@ -32,15 +32,15 @@ class Trend extends React.Component {
var fm ;
if(trendtype.current === TrendType.OneDate) {
interval = 3600 * 1000;
fm = function (value, index) {
fm = function (value, index) {
var tp = new Date(value)
return tp.getFullYear() + "-" + (tp.getMonth() + 1) + "-" + tp.getDate() + " " + tp.getHours()
return tp.getHours()
};
} else {
interval = 3600 * 1000 * 24;
fm = function (value, index) {
var tp = new Date(value)
return tp.getFullYear() + "-" + (tp.getMonth() + 1) + "-" + tp.getDate()
return (tp.getMonth() + 1) + "-" + tp.getDate()
};
}
@ -57,7 +57,9 @@ class Trend extends React.Component {
text: '趋势数据',
},
legend: {
left: 'right',
orient: 'vertical',
x: 'left',
y: 'center',
data: [],
},
// toolbox: {
@ -107,7 +109,7 @@ class Trend extends React.Component {
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: '100%',
handleSize: '0%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
@ -124,13 +126,42 @@ class Trend extends React.Component {
for (var i = 0; i < data.length; i++) {
var d = data[i];
// var color = colors[i];
if(!d.values) {
continue;
}
var tvalues = []
for (var value of d.values) {
tvalues.push([value.time_point * 1000, value.value])
}
tvalues.sort()
// if(trendtype.current === TrendType.OneDate) {
// console.log(tvalues.length);
// }
tvalues.sort();
if(trendtype.current === TrendType.OneDate) {
var last = new Date(tvalues[tvalues.length-1][0]);
last.setMinutes(0);
last.setSeconds(0);
last.setMilliseconds(0);
while(true){
var next = new Date(last.getTime() + 3600 * 1000)
if(last.getDate() === next.getDate()) {
tvalues.push([next.getTime(), 0])
last = next
} else {
// tvalues.push([next.getTime(), 0])
break
}
}
}
option.legend.data.push(d.name);
var sdata = {
@ -150,19 +181,43 @@ class Trend extends React.Component {
}
selectDate(date) {
fetch(`${config.trendurl}?date=${date}`).then((response) => {
if (response.ok) {
response.json().then((response) => {
if (response.code === 0) {
this.setState({ data: response.data.trends, type: {current: TrendType.OneDate} })
}
})
if(this.props.trendurl) {
var qdate;
if(this.props.query) {
qdate = this.props.query.date?this.props.query.date:"date";
} else {
qdate = "date"
}
});
fetch(`${this.props.trendurl}?${qdate}=${date}`).then((response) => {
if (response.ok) {
response.json().then((response) => {
if (response.code === 0) {
this.setState({ data: response.data.trends, type: {current: TrendType.OneDate} })
}
})
}
});
}
}
selectRangeDate(start, end) {
fetch(`${config.trendurl}?start=${start}&end=${end}`).then((response) => {
if(this.props.trendurl) {
var qstart, qend;
if(this.props.query) {
qstart = this.props.query.start?this.props.query.start:"start";
qend = this.props.query.end?this.props.query.end:"end";
} else {
qstart = "start"
qend = "end"
}
fetch(`${this.props.trendurl}?${qstart}=${start}&${qend}=${end}`).then((response) => {
if (response.ok) {
response.json().then((response) => {
if (response.code === 0) {
@ -172,6 +227,15 @@ class Trend extends React.Component {
}
});
}
}
selectLately(days) {
var now = new Date();
var end = defaultDateFormat(now)
now -= 3600 * 24 * 1000 * days
var start = defaultDateFormat(new Date(now))
this.selectRangeDate(start, end);
}
render() {
@ -180,16 +244,11 @@ class Trend extends React.Component {
<div style={{height: "100%"}}>
<Row style={{marginLeft: "6%", marginBottom: "10px"}}>
<Button onClick={ () => this.selectDate(defaultDateFormat(new Date()))} >今天</Button>
<Button onClick={ () => {
var now = new Date();
var end = defaultDateFormat(now)
now -= 3600 * 24 * 1000 * 7
var start = defaultDateFormat(new Date(now))
this.selectRangeDate(start, end);
} }>7天</Button>
<Button >30天</Button>
<RangePicker size="small" style={{marginLeft: "5px"}} />
<DatePicker size="small" style={{marginLeft: "5px"}} />
<Button onClick={ () => {this.selectLately(7);} }>7天</Button>
<Button onClick={ () => {this.selectLately(30);} }>30天</Button>
<DatePicker onChange = {(moment, daterange) => { this.selectDate(daterange); }} size="small" style={{marginLeft: "5px"}} />
<RangePicker onChange = {(moment, daterange) => { this.selectRangeDate(daterange[0], daterange[1]) }} size="small" style={{marginLeft: "5px"}} />
</Row>
<ReactEcharts

13
src/charts/test.js
View File

@ -1,13 +0,0 @@
var base = +new Date(1998, 9, 3);
var oneDay = 60 * 1000;
var date = [];
var data = [Math.random() * 1000];
for (var i = 1; i < 1000000; i++) {
var now = new Date(base += oneDay);
date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/') + " " + [now.getHours(), now.getMinutes()].join(":") );
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
}

104
src/charts/trend.tsx
View File

@ -1,104 +0,0 @@
import React from "react";
import ReactEcharts from "echarts-for-react";
import echarts from 'echarts';
class Trend extends React.Component {
state = {
tdata: null,
sdata: null
}
getOption(tdata: any, sdata: any) :any {
var option = {
tooltip: {
trigger: 'axis',
position: function (pt: any) {
return [pt[0], '10%'];
}
},
title: {
left: 'center',
text: '大数据量面积图',
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'time',
boundaryGap: false,
interval: 20,
data: tdata
},
yAxis: {
type: 'value',
boundaryGap: [0, '10%']
},
dataZoom: [{
type: 'inside',
start: 0,
end: 10
}, {
start: 0,
end: 10,
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: '80%',
handleStyle: {
color: '#fff',
shadowBlur: 3,
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [
{
name: '模拟数据',
type: 'line',
smooth: true,
symbol: 'none',
sampling: 'average',
itemStyle: {
color: 'rgb(255, 70, 131)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
},
data: sdata
}
]
};
return option;
}
render() {
const { tdata, sdata } = this.state;
return (
<ReactEcharts
notMerge={true}
option={this.getOption(tdata, sdata)}
style={{ height: '600px', width: '100%' }}
className='react_for_echarts' />
)
}
}
export default Trend;

73
src/pages/playerduo.js Normal file
View File

@ -0,0 +1,73 @@
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 Layout from 'antd/lib/layout/layout';
import Trend from '../charts/Trend.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>
<Trend trendurl={config.trend_online}></Trend>
</Layout>
)
}
}
class StatisticBoard extends React.Component {
state = {
player_count: 0
}
componentDidMount() {
this.getPlayerCount();
}
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 })
}
})
}
})
}
render() {
return (
<Layout style={{padding: 8, width:"100%"}}>
<Row justify="center" gutter={[24,16]} >
{SimpleCard("陪玩者", this.state.player_count)}
{/* {SimpleCard("陪玩", 1)} */}
</Row>
</Layout>
)
}
}
export default Playerduo;