Commit 16c3ad77 authored by 陈前坚's avatar 陈前坚

perf: style

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