Skip to content

C
CivManage
Commit 1acd91b5 authored by 陈前坚's avatar 陈前坚
Browse files
Options

perf: log

parent eaa833ea
Hide whitespace changes
Inline Side-by-side
Showing with 233 additions and 214 deletions
src/pages/log/loginLog/index.js
View file @ 1acd91b5
import React from 'react';
import { Chart, Interval, Tooltip } from 'bizcharts';
import React, { useState, useEffect } from 'react';
import {
DatePicker,
Table,
Row,
Col,
Button,
notification,
message,
Spin,
} from 'antd';
import { SwapRightOutlined } from '@ant-design/icons';
import { Chart, Interval, Tooltip, Axis } from 'bizcharts';
import { DataSet } from '@antv/data-set';
import moment from 'moment';
import { post, PUBLISH_SERVICE } from '@/services/index';
const data = [
{ value: 251, name: '大事例一', subName: '子事例一' },
{ value: 1041, name: '大事例三', subName: '子事例二' },
{ value: 610, name: '大事例二', subName: '子事例二' },
{ value: 434, name: '大事例二', subName: '子事例四' },
{ value: 335, name: '大事例二', subName: '子事例五' },
{ value: 250, name: '大事例三', subName: '子事例二' },
];
const dv1 = new DataSet.View().source(data);
dv1
.transform({
type: 'aggregate', // 别名summary
fields: ['name'], // 统计字段集
operations: ['count'], // 统计操作集
as: ['计数'], // 存储字段集
groupBy: ['name'], // 分组字段集
})
.transform({
type: 'sort-by',
fields: ['计数'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
order: 'DESC', // 默认为 ASC，DESC 则为逆序
});
console.log(dv1.rows);
const ServiceLog = () => {
const [loading, setLoading] = useState(false); // 源数据
const [data0, setData0] = useState([]); // 源数据
const [IPCount, setIPCount] = useState([]); // 接口调用次数,统计数据
const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值当天0点
const [endTime, setEndTime] = useState(
moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
);
const columns = [
{
title: 'IP',
dataIndex: 'IP',
key: 'IP',
fixed: 'left',
},
{
title: '登录时间',
dataIndex: 'LoginTime',
key: 'LoginTime',
},
{
title: '登录名',
dataIndex: 'LoginName',
key: 'LoginName',
},
{
title: '用户名',
dataIndex: 'ShowName',
key: 'ShowName',
},
{
title: '系统类型',
dataIndex: 'SystemType',
key: 'SystemType',
},
{
title: '终端',
dataIndex: 'Terminal',
key: 'Terminal',
},
];
// 在起止时间任意一个变化后获取数据
useEffect(() => {
if (startTime && endTime) {
setLoading(true);
getData();
}
}, [startTime, endTime]);
const getData = () => {
post(`${PUBLISH_SERVICE}/LogCenter/GetLoginLog`, {
PageIndex: 0,
PageSize: 0,
DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
IP: '',
Module: '',
Description: '',
LoginName: '',
UserName: '',
})
.then(res => {
if (res.code === 0) {
setData0(res.data);
dataTransforrm(res.data);
console.log(res.data);
} else {
notification.error({
message: '数据获取失败',
description: res.message,
});
}
setLoading(false);
})
.catch(err => {
message.error(err);
setLoading(false);
});
};
const dataTransforrm = data => {
data.map((item, index) => {
item.key = index;
return item;
});
const dv1 = new DataSet.View().source(data);
dv1
.transform({
type: 'aggregate', // 别名summary
fields: ['IP'], // 统计字段集
operations: ['count'], // 统计操作集
as: ['计数'], // 存储字段集
groupBy: ['IP'], // 分组字段集
})
.transform({
type: 'sort-by',
fields: ['计数'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
order: 'DESC', // 默认为 ASC，DESC 则为逆序
});
console.log(dv1.rows);
setIPCount(dv1.rows.slice(0, 20));
};
// DatePicker改变点击确定时
const changeStartTime = time => {
setStartTime(time);
};
const changeEndTime = time => {
setEndTime(time);
};
// 近1/6/12/24小时
const setTime = time => {
setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
setStartTime(
moment(
new Date(new Date().getTime() - time * 60 * 60 * 1000),
'YYYY-MM-DD HH:mm:ss',
),
);
};
const dv2 = new DataSet.View().source(data);
dv2
.transform({
type: 'aggregate', // 别名summary
fields: ['value'], // 统计字段集
operations: ['mean'], // 统计操作集
as: ['平均值'], // 存储字段集
groupBy: ['subName'], // 分组字段集
})
.transform({
type: 'sort-by',
fields: ['平均值'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
order: 'DESC', // 默认为 ASC，DESC 则为逆序
});
console.log(dv2.rows);
function Demo() {
return (
<>
<Chart
height={300}
width={400}
autoFit
data={dv1.rows}
interactions={['active-region']}
padding="auto"
>
<Interval position="name*计数" />
<Tooltip shared />
</Chart>
<Chart
height={300}
width={400}
autoFit
data={dv2.rows}
interactions={['active-region']}
padding="auto"
>
<Interval position="subName*平均值" />
<Tooltip shared />
</Chart>
<Row style={{ padding: '10px', background: 'white' }}>
<Col span={24}>
<span style={{ lineHeight: 2 }}>时间：</span>
<DatePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="起始时间"
value={startTime}
onChange={changeStartTime}
allowClear={false}
/>
<SwapRightOutlined style={{ lineHeight: 2 }} />
<DatePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
placeholder="结束时间"
value={endTime}
onChange={changeEndTime}
style={{ marginRight: '10px' }}
allowClear={false}
/>
<Button onClick={() => setTime(1)}>近1小时</Button>
<Button onClick={() => setTime(6)}>近6小时</Button>
<Button onClick={() => setTime(12)}>近12小时</Button>
<Button onClick={() => setTime(24)}>近1天</Button>
<Button onClick={() => setTime(24 * 7)}>近1周</Button>
</Col>
</Row>
<Spin spinning={loading} tip="loading">
<Row style={{ padding: '10px', background: 'white' }}>
<Col span={12}>
<Chart
height={316}
width={400}
autoFit
data={IPCount}
interactions={['active-region']}
padding="auto"
>
<Axis
name="IP"
label="null"
title={{ offset: 20, position: 'end' }}
/>
<Axis name="计数" title />
<Interval position="IP*计数" />
<Tooltip shared />
</Chart>
</Col>
</Row>
<Table
size="small"
bordered
columns={columns}
dataSource={data0}
scroll={{ x: 'max-content' }}
pagination={{
showTotal: (total, range) =>
`第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 10,
showQuickJumper: true,
showSizeChanger: true,
}}
/>
</Spin>
</>
);
}
export default Demo;
// dv.transform({
// type: 'aggregate', // 别名summary
// fields: ['name', 'value'], // 统计字段集
// operations: ['count', 'mean'], // 统计操作集
// as: ['计数', '平均值'], // 存储字段集
// groupBy: ['name'], // 分组字段集
// }).transform({
// type: 'sort-by',
// fields: ['计数'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
// order: 'DESC', // 默认为 ASC，DESC 则为逆序
// });
// const data = [
// {
// ID: '215341',
// loginName: 'gcwqgps',
// userName: 'gcwqgps',
// systemType: 'solution',
// terminal: 'Browser',
// IP: '192.168.10.150',
// logTime: '2020/11/23 18:56:27',
// },
// {
// ID: '215342',
// loginName: 'luojian',
// userName: 'gwcj',
// systemType: 'city',
// terminal: 'Browser',
// IP: '127.0.0.1',
// logTime: '2020/11/23 19:17:51',
// },
// {
// ID: '215343',
// loginName: 'luojian',
// userName: 'gwcj',
// systemType: 'city',
// terminal: 'Browser',
// IP: '127.0.0.1',
// logTime: '2020/11/23 19:41:12',
// },
// {
// ID: '215344',
// loginName: 'luojian',
// userName: 'gwcj',
// systemType: 'city',
// terminal: 'Browser',
// IP: '127.0.0.1',
// logTime: '2020/11/23 19:42:04',
// },
// {
// ID: '215345',
// loginName: 'luojian',
// userName: 'gwcj',
// systemType: 'city',
// terminal: 'Browser',
// IP: '127.0.0.1',
// logTime: '2020/11/23 19:45:56',
// },
// {
// ID: '215346',
// loginName: 'panda',
// userName: '熊猫智慧水务',
// systemType: 'city',
// terminal: 'Browser',
// IP: '192.168.10.150',
// logTime: '2020/11/23 19:55:20',
// },
// {
// ID: '215347',
// loginName: 'luojian',
// userName: 'gwcj',
// systemType: 'city',
// terminal: 'Browser',
// IP: '127.0.0.1',
// logTime: '2020/11/23 19:55:39',
// },
// {
// ID: '215348',
// loginName: '17671748304',
// userName: '邹小仙',
// systemType: 'city',
// terminal: 'Browser',
// IP: '192.168.10.150',
// logTime: '2020/11/23 20:01:34',
// },
// {
// ID: '215349',
// loginName: 'luojian',
// userName: 'gwcj',
// systemType: 'city',
// terminal: 'Browser',
// IP: '127.0.0.1',
// logTime: '2020/11/23 20:16:51',
// },
// ];
};
export default ServiceLog;
src/pages/log/serviceLog/index.js
View file @ 1acd91b5
......@@ -28,9 +28,14 @@ const ServiceLog = () => {
moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间
);
const [logType, setLogType] = useState(0); // 请求参数，日志类型，默认是正常，0:成功 -1:错误 9999:全部
const [tableColumns, setTableColumns] = useState([]); // 源数据
const columns11 = [
const columns = [
{
title: '接口名称',
dataIndex: 'Path',
key: 'Path',
fixed: 'left',
},
{
title: '调用时间',
dataIndex: 'CallTime',
......@@ -43,42 +48,36 @@ const ServiceLog = () => {
dataIndex: 'IP',
key: 'IP',
},
{
title: '接口名称',
dataIndex: 'Path',
key: 'Path',
width: 200,
ellipsis: true,
},
{
title: '请求方法',
dataIndex: 'Method',
key: 'Method',
ellipsis: true,
},
{
title: '查询参数',
dataIndex: 'QueryString',
key: 'QueryString',
width: 150,
ellipsis: true,
},
{
title: '请求体',
dataIndex: 'Body',
key: 'Body',
width: 200,
ellipsis: true,
},
{
title: '状态码',
dataIndex: 'Result',
key: 'Result',
},
{
title: '错误信息',
dataIndex: 'ErrorMsg',
key: 'ErrorMsg',
},
{
title: '耗时/ms',
dataIndex: 'ConsumerTime',
key: 'ConsumerTime',
fixed: 'right',
defaultSortOrder: 'descend',
sorter: (a, b) => a.ConsumerTime - b.ConsumerTime,
},
......@@ -86,16 +85,9 @@ const ServiceLog = () => {
title: '返回体大小/byte',
dataIndex: 'ResponseSize',
key: 'ResponseSize',
ellipsis: true,
fixed: 'right',
sorter: (a, b) => a.ResponseSize - b.ResponseSize,
},
{
title: '错误信息',
dataIndex: 'ErrorMsg',
key: 'ErrorMsg',
width: 200,
ellipsis: true,
},
];
// 在起止时间任意一个变化后获取数据
useEffect(() => {
......@@ -110,8 +102,6 @@ const ServiceLog = () => {
PageSize: 0,
DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
// HourFrom: startTime.format('HH:mm:ss'),
// HourTo: endTime.format('HH:mm:ss'),
IP: '',
Module: '',
LogType: +logType,
......@@ -142,29 +132,7 @@ const ServiceLog = () => {
item.key = index;
return item;
});
// const columns = Object.keys(data[0]).map(key => {
// if (key === 'ResponseSize') {
// return {
// title: key,
// dataIndex: key,
// key,
// defaultSortOrder: 'descend',
// sorter: (a, b) => a.ResponseSize - b.ResponseSize,
// };
// }
// if (key === 'Body' || key === 'QueryString' || key === 'Path') {
// return {
// title: key,
// dataIndex: key,
// key,
// width: 150,
// ellipsis: true,
// };
// }
// return { title: key, dataIndex: key, key };
// });
// setTableColumns(columns);
// console.log(Object.keys(data[0]));
const scale1 = {
Path: {
alias: '接口名称', // 别名
......@@ -234,9 +202,16 @@ const ServiceLog = () => {
return (
<>
<Row style={{ padding: '10px', background: 'white' }}>
<Row
style={{
padding: '10px',
background: 'white',
marginBottom: '2px',
minWidth: '1030px',
}}
>
<Col span={24}>
<span style={{ lineHeight: 2 }}>时间：</span>
<span>时间：</span>
<DatePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
......@@ -245,7 +220,7 @@ const ServiceLog = () => {
onChange={changeStartTime}
allowClear={false}
/>
<SwapRightOutlined style={{ lineHeight: 2 }} />
<SwapRightOutlined style={{ verticalAlign: '0.125em' }} />
<DatePicker
showTime
format="YYYY-MM-DD HH:mm:ss"
......@@ -260,7 +235,7 @@ const ServiceLog = () => {
<Button onClick={() => setTime(12)}>近12小时</Button>
<Button onClick={() => setTime(24)}>近1天</Button>
<Button onClick={() => setTime(24 * 7)}>近1周</Button>
<span style={{ lineHeight: 2, marginLeft: '20px' }}>日志类型：</span>
<span style={{ marginLeft: '20px' }}>日志类型：</span>
<Select defaultValue="正常" onChange={selectChange}>
<Option value="9999">全部</Option>
<Option value="0">正常</Option>
......@@ -269,10 +244,10 @@ const ServiceLog = () => {
</Col>
</Row>
<Spin spinning={loading} tip="loading">
<Row style={{ padding: '10px', background: 'white' }}>
<Row style={{ padding: '16px', background: 'white' }}>
<Col span={12}>
<Chart
height={316}
height={300}
width={400}
autoFit
data={pathCount}
......@@ -293,7 +268,7 @@ const ServiceLog = () => {
</Col>
<Col span={12}>
<Chart
height={316}
height={300}
width={400}
autoFit
data={reponseTime}
......@@ -315,7 +290,7 @@ const ServiceLog = () => {
<Table
size="small"
bordered
columns={columns11}
columns={columns}
dataSource={data0}
scroll={{ x: 'max-content' }}
pagination={{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment