fork from bc4552c5a8
This commit is contained in:
@@ -0,0 +1,77 @@
|
||||
/**
|
||||
* Created by gxl.gao on 2017/10/25.
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
// import PropTypes from 'prop-types'
|
||||
import axios from 'axios';
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
|
||||
import { Spin } from 'antd';
|
||||
class StatisChart extends Component {
|
||||
static propTypes = {};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
showLoading: true,
|
||||
chartDate: {
|
||||
mockCount: 0,
|
||||
mockDateList: []
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
UNSAFE_componentWillMount() {
|
||||
this.getMockData();
|
||||
}
|
||||
|
||||
// 获取mock 请求次数信息
|
||||
async getMockData() {
|
||||
let result = await axios.get('/api/plugin/statismock/get');
|
||||
if (result.data.errcode === 0) {
|
||||
let mockStatisData = result.data.data;
|
||||
this.setState({
|
||||
showLoading: false,
|
||||
chartDate: { ...mockStatisData }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const width = 1050;
|
||||
const { mockCount, mockDateList } = this.state.chartDate;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Spin spinning={this.state.showLoading}>
|
||||
<div className="statis-chart-content">
|
||||
<h3 className="statis-title">mock 接口访问总数为：{mockCount.toLocaleString()}</h3>
|
||||
<div className="statis-chart">
|
||||
<LineChart
|
||||
width={width}
|
||||
height={300}
|
||||
data={mockDateList}
|
||||
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
|
||||
>
|
||||
<XAxis dataKey="_id" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="7 3" />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line
|
||||
name="mock统计值"
|
||||
type="monotone"
|
||||
dataKey="count"
|
||||
stroke="#8884d8"
|
||||
activeDot={{ r: 8 }}
|
||||
/>
|
||||
</LineChart>
|
||||
</div>
|
||||
<div className="statis-footer">过去3个月mock接口调用情况</div>
|
||||
</div>
|
||||
</Spin>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default StatisChart;
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from 'react';
|
||||
import { Table } from 'antd';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Group',
|
||||
dataIndex: 'name',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '项目',
|
||||
dataIndex: 'project',
|
||||
key: 'project'
|
||||
},
|
||||
{
|
||||
title: '接口',
|
||||
dataIndex: 'interface',
|
||||
key: 'interface'
|
||||
},
|
||||
{
|
||||
title: 'mock数据',
|
||||
dataIndex: 'mock',
|
||||
key: 'mock'
|
||||
}
|
||||
];
|
||||
|
||||
const StatisTable = props => {
|
||||
const { dataSource } = props;
|
||||
return (
|
||||
<div className="m-row-table">
|
||||
<h3 className="statis-title">分组数据详情</h3>
|
||||
<Table
|
||||
className="statis-table"
|
||||
pagination={false}
|
||||
dataSource={dataSource}
|
||||
columns={columns}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
StatisTable.propTypes = {
|
||||
dataSource: PropTypes.array
|
||||
};
|
||||
|
||||
export default StatisTable;
|
||||
210
exts/yapi-plugin-statistics/statisticsClientPage/index.js
Normal file
210
exts/yapi-plugin-statistics/statisticsClientPage/index.js
Normal file
@@ -0,0 +1,210 @@
|
||||
/**
|
||||
* Created by gxl.gao on 2017/10/25.
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import axios from 'axios';
|
||||
import PropTypes from 'prop-types';
|
||||
import './index.scss';
|
||||
// import { withRouter } from 'react-router-dom';
|
||||
import { Row, Col, Tooltip, Icon } from 'antd';
|
||||
import { setBreadcrumb } from 'client/reducer/modules/user';
|
||||
import StatisChart from './StatisChart';
|
||||
import StatisTable from './StatisTable';
|
||||
|
||||
const CountOverview = props => (
|
||||
<Row type="flex" justify="space-start" className="m-row">
|
||||
<Col className="gutter-row" span={6}>
|
||||
<span>
|
||||
分组总数
|
||||
<Tooltip placement="rightTop" title="统计yapi中一共开启了多少可见的公共分组">
|
||||
<Icon className="m-help" type="question-circle" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
<h2 className="gutter-box">{props.date.groupCount}</h2>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<span>
|
||||
项目总数
|
||||
<Tooltip placement="rightTop" title="统计yapi中建立的所有项目总数">
|
||||
<Icon className="m-help" type="question-circle" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
<h2 className="gutter-box">{props.date.projectCount}</h2>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<span>
|
||||
接口总数
|
||||
<Tooltip placement="rightTop" title="统计yapi所有项目中的所有接口总数">
|
||||
{/*<a href="javascript:void(0)" className="m-a-help">?</a>*/}
|
||||
<Icon className="m-help" type="question-circle" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
<h2 className="gutter-box">{props.date.interfaceCount}</h2>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<span>
|
||||
测试接口总数
|
||||
<Tooltip placement="rightTop" title="统计yapi所有项目中的所有测试接口总数">
|
||||
{/*<a href="javascript:void(0)" className="m-a-help">?</a>*/}
|
||||
<Icon className="m-help" type="question-circle" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
<h2 className="gutter-box">{props.date.interfaceCaseCount}</h2>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
|
||||
CountOverview.propTypes = {
|
||||
date: PropTypes.object
|
||||
};
|
||||
|
||||
const StatusOverview = props => (
|
||||
<Row type="flex" justify="space-start" className="m-row">
|
||||
<Col className="gutter-row" span={6}>
|
||||
<span>
|
||||
操作系统类型
|
||||
<Tooltip
|
||||
placement="rightTop"
|
||||
title="操作系统类型,返回值有'darwin', 'freebsd', 'linux', 'sunos' , 'win32'"
|
||||
>
|
||||
<Icon className="m-help" type="question-circle" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
<h2 className="gutter-box">{props.data.systemName}</h2>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<span>
|
||||
cpu负载
|
||||
<Tooltip placement="rightTop" title="cpu的总负载情况">
|
||||
<Icon className="m-help" type="question-circle" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
<h2 className="gutter-box">{props.data.load} %</h2>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<span>
|
||||
系统空闲内存总量 / 内存总量
|
||||
<Tooltip placement="rightTop" title="系统空闲内存总量 / 内存总量">
|
||||
<Icon className="m-help" type="question-circle" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
<h2 className="gutter-box">
|
||||
{props.data.freemem} G / {props.data.totalmem} G{' '}
|
||||
</h2>
|
||||
</Col>
|
||||
<Col className="gutter-row" span={6}>
|
||||
<span>
|
||||
邮箱状态
|
||||
<Tooltip placement="rightTop" title="检测配置文件中配置邮箱的状态">
|
||||
<Icon className="m-help" type="question-circle" />
|
||||
</Tooltip>
|
||||
</span>
|
||||
<h2 className="gutter-box">{props.data.mail}</h2>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
|
||||
StatusOverview.propTypes = {
|
||||
data: PropTypes.object
|
||||
};
|
||||
|
||||
@connect(
|
||||
null,
|
||||
{
|
||||
setBreadcrumb
|
||||
}
|
||||
)
|
||||
class statisticsPage extends Component {
|
||||
static propTypes = {
|
||||
setBreadcrumb: PropTypes.func
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
count: {
|
||||
groupCount: 0,
|
||||
projectCount: 0,
|
||||
interfaceCount: 0,
|
||||
interfactCaseCount: 0
|
||||
},
|
||||
status: {
|
||||
mail: '',
|
||||
systemName: '',
|
||||
totalmem: '',
|
||||
freemem: '',
|
||||
uptime: ''
|
||||
},
|
||||
dataTotal: []
|
||||
};
|
||||
}
|
||||
|
||||
async UNSAFE_componentWillMount() {
|
||||
this.props.setBreadcrumb([{ name: '系统信息' }]);
|
||||
this.getStatisData();
|
||||
this.getSystemStatusData();
|
||||
this.getGroupData();
|
||||
}
|
||||
|
||||
// 获取统计数据
|
||||
async getStatisData() {
|
||||
let result = await axios.get('/api/plugin/statismock/count');
|
||||
if (result.data.errcode === 0) {
|
||||
let statisData = result.data.data;
|
||||
this.setState({
|
||||
count: { ...statisData }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 获取系统信息
|
||||
|
||||
async getSystemStatusData() {
|
||||
let result = await axios.get('/api/plugin/statismock/get_system_status');
|
||||
if (result.data.errcode === 0) {
|
||||
let statusData = result.data.data;
|
||||
this.setState({
|
||||
status: { ...statusData }
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 获取分组详细信息
|
||||
|
||||
async getGroupData() {
|
||||
let result = await axios.get('/api/plugin/statismock/group_data_statis');
|
||||
if (result.data.errcode === 0) {
|
||||
let statusData = result.data.data;
|
||||
statusData.map(item => {
|
||||
return (item['key'] = item.name);
|
||||
});
|
||||
this.setState({
|
||||
dataTotal: statusData
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { count, status, dataTotal } = this.state;
|
||||
|
||||
return (
|
||||
<div className="g-statistic">
|
||||
<div className="content">
|
||||
<h2 className="title">系统状况</h2>
|
||||
<div className="system-content">
|
||||
<StatusOverview data={status} />
|
||||
</div>
|
||||
<h2 className="title">数据统计</h2>
|
||||
<div>
|
||||
<CountOverview date={count} />
|
||||
<StatisTable dataSource={dataTotal} />
|
||||
<StatisChart />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default statisticsPage;
|
||||
83
exts/yapi-plugin-statistics/statisticsClientPage/index.scss
Normal file
83
exts/yapi-plugin-statistics/statisticsClientPage/index.scss
Normal file
@@ -0,0 +1,83 @@
|
||||
@import '../../../client/styles/mixin';
|
||||
|
||||
.g-statistic {
|
||||
@include row-width-limit;
|
||||
margin: 0 auto .24rem;
|
||||
margin-top: 24px;
|
||||
min-width: 11.2rem;
|
||||
|
||||
|
||||
.content {
|
||||
-webkit-box-flex: 1;
|
||||
padding: 24px;
|
||||
width:100%;
|
||||
background: #fff;
|
||||
min-height: 5rem;
|
||||
// overflow-x: scroll;
|
||||
}
|
||||
.m-row {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.m-row-table {
|
||||
padding-top: 16px
|
||||
|
||||
}
|
||||
|
||||
.statis-table {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.m-help {
|
||||
margin-left: 5px;
|
||||
border-radius: 12px;
|
||||
color: #2395f1;
|
||||
}
|
||||
|
||||
.gutter-row {
|
||||
padding-left: 24px;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.gutter-row:first-child {
|
||||
border-left: 0
|
||||
}
|
||||
|
||||
.gutter-box {
|
||||
margin-top: 8px;
|
||||
//margin-bottom: 16px;
|
||||
//margin: 8px 0 16px;
|
||||
}
|
||||
|
||||
.statis-chart-content {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.statis-title{
|
||||
padding: 8px 8px 24px;
|
||||
}
|
||||
|
||||
.statis-chart{
|
||||
margin:0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.statis-footer{
|
||||
margin:16px 0;
|
||||
text-align: center;
|
||||
width: 1050px;
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 0.16rem;
|
||||
border-left: 3px solid #2395f1;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.system-content{
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user