Commit 73291171 authored by 张烨's avatar 张烨
parents 54e288fe 16c3ad77
......@@ -12,7 +12,7 @@ import {
Spin,
} from 'antd';
import { SwapRightOutlined } from '@ant-design/icons';
import { Chart, Interval, Tooltip, Axis } from 'bizcharts';
import { Chart, Interval, Line, Tooltip, Axis } from 'bizcharts';
// import { DataSet } from '@antv/data-set';
import moment from 'moment';
import { post, PUBLISH_SERVICE } from '@/services/index';
......@@ -37,11 +37,17 @@ const ServiceLog = () => {
const [searchWord, setSearchWord] = useState(''); // 关键字
// 计算时间间隔(分钟)
const start = new Date(startTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
const end = new Date(endTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
const minuteInterval = (end - start) / (60 * 1000); // 相隔多少分钟
if (minuteInterval <= 0) {
notification.error({
message: '时间设置有误',
description: '起始时间应该早于结束时间',
});
}
const countInterval = () => {
const start = new Date(startTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
const end = new Date(endTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
const minuteInterval = (end - start) / (60 * 1000); // 相隔多少分钟
if (minuteInterval <= 30) {
if (minuteInterval > 0 && minuteInterval <= 30) {
setTimeInterval('1');
} else if (minuteInterval > 30 && minuteInterval <= 120) {
setTimeInterval('2');
......@@ -69,21 +75,6 @@ const ServiceLog = () => {
dataIndex: 'IP',
key: 'IP',
},
{
title: '请求方法',
dataIndex: 'Method',
key: 'Method',
},
{
title: '查询参数',
dataIndex: 'QueryString',
key: 'QueryString',
},
{
title: '请求体',
dataIndex: 'Body',
key: 'Body',
},
{
title: '返回状态',
dataIndex: 'Result',
......@@ -99,6 +90,27 @@ const ServiceLog = () => {
title: '错误信息',
dataIndex: 'ErrorMsg',
key: 'ErrorMsg',
render: record => {
if (!record) {
return '-';
}
return record;
},
},
{
title: '请求方法',
dataIndex: 'Method',
key: 'Method',
},
{
title: '查询参数',
dataIndex: 'QueryString',
key: 'QueryString',
},
{
title: '请求体',
dataIndex: 'Body',
key: 'Body',
},
{
title: '耗时/ms',
......@@ -116,21 +128,20 @@ const ServiceLog = () => {
sorter: (a, b) => a.ResponseSize - b.ResponseSize,
},
];
// 在起止时间任意一个变化后获取数据
// 在起止时间任意一个变化后获取数据,且起止时间应该早于结束时间
useEffect(() => {
if (startTime && endTime) {
countInterval();
if (startTime && endTime && end - start > 0) {
countInterval(); // 根据起止时间计算时间间隔
}
}, [startTime, endTime]);
useEffect(() => {
// countInterval();
if (startTime && endTime) {
if (startTime && endTime && end - start > 0) {
setLoading(true);
getData('/TrafficStatistics', setVisitedCount); // 访问量统计
}
}, [startTime, endTime, logType, timeInterval]);
useEffect(() => {
if (startTime && endTime) {
if (startTime && endTime && end - start > 0) {
setLoading(true);
getData('/TopCountList', setPathCount); // 接口调用频次统计
getData('/TopConsumeList', setReponseTime); // 接口平均耗时统计
......@@ -155,19 +166,18 @@ const ServiceLog = () => {
})
.then(res => {
if (res.code === 0) {
if (res.data && res.data.length > 0) {
res.data.map((item, index) => {
item.key = index;
if (url === '/TrafficStatistics') {
item.StartTime = item.StartTime.replace(' ', '-');
}
return item;
});
}
if (res.data === null) {
if (!res.data) {
set([]);
} else {
set(res.data);
set(
res.data.map((item, index) => {
item.key = index;
if (url === '/TrafficStatistics') {
item.StartTime = item.StartTime.replace(' ', '-');
}
return item;
}),
);
}
} else {
notification.error({
......@@ -288,14 +298,15 @@ const ServiceLog = () => {
data={visitedCount}
interactions={['active-region']}
padding="auto"
renderer="svg"
scale={{
Count: { alias: '计数' },
StartTime: { alias: '访问量统计' },
}}
>
<Axis name="StartTime" label="null" title={{ offset: 20 }} />
<Axis name="StartTime" label="" title={{ offset: 20 }} />
<Axis name="Count" title />
<Interval position="StartTime*Count" />
<Line shape="smooth" position="StartTime*Count" />
<Tooltip shared />
</Chart>
</Col>
......@@ -306,12 +317,13 @@ const ServiceLog = () => {
data={pathCount}
interactions={['active-region']}
padding="auto"
renderer="svg"
scale={{
Count: { alias: '计数' },
Path: { alias: '接口调用频次统计' },
}}
>
<Axis name="Path" label="null" title={{ offset: 20 }} />
<Axis name="Path" label="" title={{ offset: 20 }} />
<Axis name="Count" title />
<Interval position="Path*Count" />
<Tooltip shared />
......@@ -324,12 +336,13 @@ const ServiceLog = () => {
data={reponseTime}
interactions={['active-region']}
padding="auto"
renderer="svg"
scale={{
AvgTime: { alias: '响应时长/ms' },
Path: { alias: '接口平均耗时统计' },
}}
>
<Axis name="Path" label="null" title={{ offset: 20 }} />
<Axis name="Path" label="" title={{ offset: 20 }} />
<Axis name="AvgTime" title />
<Interval position="Path*AvgTime" />
<Tooltip shared />
......
......@@ -37,11 +37,17 @@ const ServiceLog = () => {
const [searchWord, setSearchWord] = useState(''); // 关键字
// 计算时间间隔(分钟)
const start = new Date(startTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
const end = new Date(endTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
const minuteInterval = (end - start) / (60 * 1000); // 相隔多少分钟
if (minuteInterval <= 0) {
notification.error({
message: '时间设置有误',
description: '起始时间应该早于结束时间',
});
}
const countInterval = () => {
const start = new Date(startTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
const end = new Date(endTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
const minuteInterval = (end - start) / (60 * 1000); // 相隔多少分钟
if (minuteInterval <= 30) {
if (minuteInterval > 0 && minuteInterval <= 30) {
setTimeInterval('1');
} else if (minuteInterval > 30 && minuteInterval <= 120) {
setTimeInterval('2');
......@@ -122,20 +128,20 @@ const ServiceLog = () => {
sorter: (a, b) => a.ResponseSize - b.ResponseSize,
},
];
// 在起止时间任意一个变化后获取数据
// 在起止时间任意一个变化后获取数据,且起止时间应该早于结束时间
useEffect(() => {
if (startTime && endTime) {
if (startTime && endTime && end - start > 0) {
countInterval(); // 根据起止时间计算时间间隔
}
}, [startTime, endTime]);
useEffect(() => {
if (startTime && endTime) {
if (startTime && endTime && end - start > 0) {
setLoading(true);
getData('/TrafficStatistics', setVisitedCount); // 访问量统计
}
}, [startTime, endTime, logType, timeInterval]);
useEffect(() => {
if (startTime && endTime) {
if (startTime && endTime && end - start > 0) {
setLoading(true);
getData('/TopCountList', setPathCount); // 接口调用频次统计
getData('/TopConsumeList', setReponseTime); // 接口平均耗时统计
......@@ -160,19 +166,18 @@ const ServiceLog = () => {
})
.then(res => {
if (res.code === 0) {
if (res.data && res.data.length > 0) {
res.data.map((item, index) => {
item.key = index;
if (url === '/TrafficStatistics') {
item.StartTime = item.StartTime.replace(' ', '-');
}
return item;
});
}
if (res.data === null) {
if (!res.data) {
set([]);
} else {
set(res.data);
set(
res.data.map((item, index) => {
item.key = index;
if (url === '/TrafficStatistics') {
item.StartTime = item.StartTime.replace(' ', '-');
}
return item;
}),
);
}
} else {
notification.error({
......@@ -312,12 +317,13 @@ const ServiceLog = () => {
data={pathCount}
interactions={['active-region']}
padding="auto"
renderer="svg"
scale={{
Count: { alias: '计数' },
Path: { alias: '接口调用频次统计' },
}}
>
<Axis name="Path" label="null" title={{ offset: 20 }} />
<Axis name="Path" label="" title={{ offset: 20 }} />
<Axis name="Count" title />
<Interval position="Path*Count" />
<Tooltip shared />
......@@ -330,12 +336,13 @@ const ServiceLog = () => {
data={reponseTime}
interactions={['active-region']}
padding="auto"
renderer="svg"
scale={{
AvgTime: { alias: '响应时长/ms' },
Path: { alias: '接口平均耗时统计' },
}}
>
<Axis name="Path" label="null" title={{ offset: 20 }} />
<Axis name="Path" label="" title={{ offset: 20 }} />
<Axis name="AvgTime" title />
<Interval position="Path*AvgTime" />
<Tooltip shared />
......
......@@ -44,8 +44,11 @@
background: #aed8fa !important;
}
}
.ant-modal-close-x {
line-height: 40px;
.ant-modal-close-icon {
vertical-align: 0.3em;
}
.ant-notification-close-icon{
vertical-align: 0.2em;
}
}
.redText{
......
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