Skip to content

C
CivManage
Commit 7e5d151d authored by 陈前坚's avatar 陈前坚
Browse files
Options

perf: log

parent fb66d2bb
Show whitespace changes
Inline Side-by-side
Showing with 243 additions and 234 deletions
src/pages/log/omsLog/index.js
View file @ 7e5d151d
...@@ -6,29 +6,51 @@ import { ...@@ -6,29 +6,51 @@ import {
Col, Col,
Button, Button,
Select, Select,
Input,
notification, notification,
message, message,
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, 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';
import styles from './index.less'; import styles from './index.less';
const { Option } = Select; const { Option } = Select;
const { Search } = Input;
const ServiceLog = () => { const ServiceLog = () => {
const [loading, setLoading] = useState(false); // 源数据 const [loading, setLoading] = useState(false); // 源数据
const [data0, setData0] = useState([]); // 源数据 const [dataTable, setDataTable] = useState([]); // 源数据
const [visitedCount, setVisitedCount] = useState([]); // 访问量,统计数据
const [pathCount, setPathCount] = useState([]); // 接口调用次数,统计数据 const [pathCount, setPathCount] = useState([]); // 接口调用次数,统计数据
const [reponseTime, setReponseTime] = useState([]); // 接口调用时长,统计数据 const [reponseTime, setReponseTime] = useState([]); // 接口调用时长,统计数据
const [scale, setScale] = useState({}); // 坐标轴别名 const [timeInterval, setTimeInterval] = useState('3'); // 时间间隔，1/2/3/4（每分钟/5分钟/小时/天），默认每小时
const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值当天0点 // const [scale, setScale] = useState({}); // 坐标轴别名
// const [pageSize, setPageSize] = useState(100); // 分页大小
const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值，当天0点00:00:00
const [endTime, setEndTime] = useState( const [endTime, setEndTime] = useState(
moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间 moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值，当前时间
); );
const [logType, setLogType] = useState(0); // 请求参数，日志类型，默认是正常，0:成功 -1:错误 9999:全部 const [logType, setLogType] = useState(0); // 请求参数，日志类型，默认是正常，0:成功 -1:错误 9999:全部
const [searchWord, setSearchWord] = useState(''); // 关键字
// 计算时间间隔（分钟）
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) {
setTimeInterval('1');
} else if (minuteInterval > 30 && minuteInterval <= 120) {
setTimeInterval('2');
} else if (minuteInterval > 120 && minuteInterval <= 60 * 24) {
setTimeInterval('3');
} else {
setTimeInterval('4');
}
};
const columns = [ const columns = [
{ {
...@@ -41,8 +63,6 @@ const ServiceLog = () => { ...@@ -41,8 +63,6 @@ const ServiceLog = () => {
title: '调用时间', title: '调用时间',
dataIndex: 'CallTime', dataIndex: 'CallTime',
key: 'CallTime', key: 'CallTime',
// filters: orgFilters,
// onFilter: (value, record) => record.OUName === value,
}, },
{ {
title: 'IP', title: 'IP',
...@@ -65,7 +85,7 @@ const ServiceLog = () => { ...@@ -65,7 +85,7 @@ const ServiceLog = () => {
key: 'Body', key: 'Body',
}, },
{ {
title: '结果', title: '返回状态',
dataIndex: 'Result', dataIndex: 'Result',
key: 'Result', key: 'Result',
render: record => { render: record => {
...@@ -97,30 +117,53 @@ const ServiceLog = () => { ...@@ -97,30 +117,53 @@ const ServiceLog = () => {
}, },
]; ];
// 在起止时间任意一个变化后获取数据 // 在起止时间任意一个变化后获取数据
useEffect(() => {
// countInterval();
if (startTime && endTime) {
setLoading(true);
getData('/TrafficStatistics', setVisitedCount); // 访问量统计
}
}, [startTime, endTime, logType, timeInterval]);
useEffect(() => { useEffect(() => {
if (startTime && endTime) { if (startTime && endTime) {
setLoading(true); setLoading(true);
getData(); getData('/TopCountList', setPathCount); // 接口调用频次统计
getData('/TopConsumeList', setReponseTime); // 接口平均耗时统计
getData('/GetOMSLog', setDataTable); // 接口调用记录
} }
}, [startTime, endTime, logType]); }, [startTime, endTime, logType]);
const getData = () => {
post(`${PUBLISH_SERVICE}/LogCenter/GetOMSLog`, { // 封装接口请求，参数url/设置方法set
PageIndex: 0, const getData = (url, set) => {
PageSize: 0, post(`${PUBLISH_SERVICE}/LogCenter${url}`, {
// 获取日志表数据时PageSize设置为200，其他接口默认值20
PageSize: url === '/GetOMSLog' ? 200 : 20,
DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'), DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'), DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
IP: '', IP: '',
Module: '', Module: url === '/GetOMSLog' ? searchWord : '',
LogType: +logType, LogType: +logType,
Description: '', Description: '',
LoginName: '', LoginName: '',
UserName: '', UserName: '',
StaticsType: +timeInterval,
}) })
.then(res => { .then(res => {
if (res.code === 0) { if (res.code === 0) {
setData0(res.data); if (res.data && res.data.length > 0) {
dataTransforrm(res.data); res.data.map((item, index) => {
console.log(res.data); item.key = index;
if (url === '/TrafficStatistics') {
item.StartTime = item.StartTime.replace(' ', '-');
}
return item;
});
}
if (res.data === null) {
set([]);
} else {
set(res.data);
}
} else { } else {
notification.error({ notification.error({
message: '数据获取失败', message: '数据获取失败',
...@@ -134,56 +177,6 @@ const ServiceLog = () => { ...@@ -134,56 +177,6 @@ const ServiceLog = () => {
setLoading(false); setLoading(false);
}); });
}; };
const dataTransforrm = data => {
data.map((item, index) => {
item.key = index;
return item;
});
const scale1 = {
Path: {
alias: '接口名称', // 别名
},
响应时长: {
alias: '响应时长/ms', // 别名
},
};
setScale(scale1);
const dv1 = new DataSet.View().source(data);
dv1
.transform({
type: 'aggregate', // 别名summary
fields: ['Path'], // 统计字段集
operations: ['count'], // 统计操作集
as: ['计数'], // 存储字段集
groupBy: ['Path'], // 分组字段集
})
.transform({
type: 'sort-by',
fields: ['计数'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
order: 'DESC', // 默认为 ASC，DESC 则为逆序
});
console.log(dv1.rows);
setPathCount(dv1.rows.slice(0, 20));
const dv2 = new DataSet.View().source(data);
dv2
.transform({
type: 'aggregate', // 别名summary
fields: ['ConsumerTime'], // 统计字段集
operations: ['mean'], // 统计操作集
as: ['响应时长'], // 存储字段集
groupBy: ['Path'], // 分组字段集
})
.transform({
type: 'sort-by',
fields: ['响应时长'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
order: 'DESC', // 默认为 ASC，DESC 则为逆序
});
console.log(dv2.rows);
setReponseTime(dv2.rows.slice(0, 20));
};
// DatePicker改变点击确定时 // DatePicker改变点击确定时
const changeStartTime = time => { const changeStartTime = time => {
...@@ -192,20 +185,30 @@ const ServiceLog = () => { ...@@ -192,20 +185,30 @@ const ServiceLog = () => {
const changeEndTime = time => { const changeEndTime = time => {
setEndTime(time); setEndTime(time);
}; };
// 近1/6/12/24小时 // 近1/6/12/24小时,同时设置对应的时间间隔
const setTime = time => { const setTime = (time, value) => {
setTimeInterval(value);
setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss')); setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
setStartTime( setStartTime(
moment( moment(
new Date(new Date().getTime() - time * 60 * 60 * 1000), new Date(new Date().getTime() - time * 60 * 1000),
'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss',
), ),
); );
}; };
// 设置日志类型 // 设置返回状态
const selectChange = value => { const changeStatus = value => {
setLogType(value); setLogType(value);
}; };
// 设置时间间隔
const selectChange = value => {
setTimeInterval(value);
};
// 获取搜索框的值
const handleSearch = e => {
setSearchWord(e.target.value);
// console.log(e.target.value);
};
return ( return (
<> <>
...@@ -231,59 +234,99 @@ const ServiceLog = () => { ...@@ -231,59 +234,99 @@ const ServiceLog = () => {
style={{ marginRight: '10px' }} style={{ marginRight: '10px' }}
allowClear={false} allowClear={false}
/> />
<Button onClick={() => setTime(1)}>近1小时</Button> <Button onClick={() => setTime(15, '1')}>近15分钟</Button>
<Button onClick={() => setTime(6)}>近6小时</Button> <Button onClick={() => setTime(60, '2')}>近1小时</Button>
<Button onClick={() => setTime(12)}>近12小时</Button> <Button onClick={() => setTime(12 * 60, '3')}>近12小时</Button>
<Button onClick={() => setTime(24)}>近1天</Button> <Button onClick={() => setTime(24 * 60, '3')}>近1天</Button>
<Button onClick={() => setTime(24 * 7)}>近1周</Button> <Button onClick={() => setTime(24 * 7 * 60, '4')}>近1周</Button>
<span style={{ marginLeft: '20px' }}>日志类型：</span> <span style={{ marginLeft: '20px' }}>返回状态：</span>
<Select defaultValue="正常" onChange={selectChange}> <Select defaultValue="正常" onChange={changeStatus}>
<Option value="9999">全部</Option> <Option value="9999">全部</Option>
<Option value="0">正常</Option> <Option value="0">正常</Option>
<Option value="-1">错误</Option> <Option value="-1">错误</Option>
</Select> </Select>
<Search
// allowClear
style={{ width: 200, marginLeft: '20px' }}
placeholder="请输入接口名称"
onSearch={() => {
getData('/GetOMSLog', setDataTable);
}}
onChange={e => handleSearch(e)}
enterButton
value={searchWord}
/>
</Col> </Col>
</Row> </Row>
<Spin spinning={loading} tip="loading"> <Spin spinning={loading} tip="loading">
<Row style={{ background: 'white' }}>
<Col offset={6} style={{ paddingTop: '8px' }}>
<span>间隔：</span>
<Select
defaultValue="每小时"
value={timeInterval}
size="small"
onChange={selectChange}
>
<Option value="1">每分钟</Option>
<Option value="2">每5分钟</Option>
<Option value="3">每小时</Option>
<Option value="4">每天</Option>
</Select>
</Col>
</Row>
<Row className={styles.chart}> <Row className={styles.chart}>
<Col span={12}> <Col span={8}>
<Chart
height={300}
autoFit
data={visitedCount}
interactions={['active-region']}
padding="auto"
scale={{
Count: { alias: '计数' },
StartTime: { alias: '访问量统计' },
}}
>
<Axis name="StartTime" label="null" title={{ offset: 20 }} />
<Axis name="Count" title />
<Interval position="StartTime*Count" />
<Tooltip shared />
</Chart>
</Col>
<Col span={7} offset={1}>
<Chart <Chart
height={300} height={300}
width={400}
autoFit autoFit
data={pathCount} data={pathCount}
interactions={['active-region']} interactions={['active-region']}
padding="auto" padding="auto"
scale={scale} scale={{
Count: { alias: '计数' },
Path: { alias: '接口调用频次统计' },
}}
> >
<Axis <Axis name="Path" label="null" title={{ offset: 20 }} />
name="Path" <Axis name="Count" title />
// label={{ autoEllipsis: 'true', autoHide: 'true' }} <Interval position="Path*Count" />
label="null"
title={{ offset: 20, position: 'end' }}
/>
<Axis name="计数" title />
<Interval position="Path*计数" />
<Tooltip shared /> <Tooltip shared />
</Chart> </Chart>
</Col> </Col>
<Col span={12}> <Col span={7} offset={1}>
<Chart <Chart
height={300} height={300}
width={400}
autoFit autoFit
data={reponseTime} data={reponseTime}
interactions={['active-region']} interactions={['active-region']}
padding="auto" padding="auto"
scale={scale} scale={{
AvgTime: { alias: '响应时长/ms' },
Path: { alias: '接口平均耗时统计' },
}}
> >
<Axis <Axis name="Path" label="null" title={{ offset: 20 }} />
name="Path" <Axis name="AvgTime" title />
label="null" <Interval position="Path*AvgTime" />
title={{ offset: 20, position: 'end' }}
/>
<Axis name="响应时长" title />
<Interval position="Path*响应时长" />
<Tooltip shared /> <Tooltip shared />
</Chart> </Chart>
</Col> </Col>
...@@ -293,13 +336,13 @@ const ServiceLog = () => { ...@@ -293,13 +336,13 @@ const ServiceLog = () => {
size="small" size="small"
bordered bordered
columns={columns} columns={columns}
dataSource={data0} dataSource={dataTable}
scroll={{ x: 'max-content' }} scroll={{ x: 'max-content' }}
pagination={{ pagination={{
showTotal: (total, range) => showTotal: (total, range) =>
`第${range[0]}-${range[1]} 条/共 ${total} 条`, `第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100], pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 10, defaultPageSize: 20,
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
}} }}
......
src/pages/log/omsLog/index.less
View file @ 7e5d151d
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
min-width: 1030px; min-width: 1030px;
} }
.chart{ .chart{
padding: 16px; padding: 10px;
background: white; background: white;
} }
.table{ .table{
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
color:rgba(0,0,0,0.85); color:rgba(0,0,0,0.85);
} }
.ant-table-content{ .ant-table-content{
height:calc(100vh - 500px); height:calc(100vh - 520px);
border-right: white; border-right: white;
overflow: auto !important; overflow: auto !important;
} }
......
src/pages/log/serviceLog/index.js
View file @ 7e5d151d
...@@ -6,46 +6,49 @@ import { ...@@ -6,46 +6,49 @@ import {
Col, Col,
Button, Button,
Select, Select,
Input,
notification, notification,
message, message,
Spin, Spin,
} from 'antd'; } from 'antd';
import { SwapRightOutlined } from '@ant-design/icons'; import { SwapRightOutlined } from '@ant-design/icons';
import { Chart, Interval, Line, Tooltip, Axis } from 'bizcharts'; import { Chart, Interval, 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';
import styles from './index.less'; import styles from './index.less';
const { Option } = Select; const { Option } = Select;
const { Search } = Input;
const ServiceLog = () => { const ServiceLog = () => {
const [loading, setLoading] = useState(false); // 源数据 const [loading, setLoading] = useState(false); // 源数据
const [data0, setData0] = useState([]); // 源数据 const [dataTable, setDataTable] = useState([]); // 源数据
const [visitedCount, setVisitedCount] = useState([]); // 访问量,统计数据
const [pathCount, setPathCount] = useState([]); // 接口调用次数,统计数据 const [pathCount, setPathCount] = useState([]); // 接口调用次数,统计数据
const [reponseTime, setReponseTime] = useState([]); // 接口调用时长,统计数据 const [reponseTime, setReponseTime] = useState([]); // 接口调用时长,统计数据
const [perMinute, setPerMinute] = useState([]); // 每分钟访问量,统计数据 const [timeInterval, setTimeInterval] = useState('3'); // 时间间隔，1/2/3/4（每分钟/5分钟/小时/天），默认每小时
const [timeInterval, setTimeInterval] = useState('60'); // const [scale, setScale] = useState({}); // 坐标轴别名
const [scale, setScale] = useState({}); // 坐标轴别名 // const [pageSize, setPageSize] = useState(100); // 分页大小
const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值当天0点00:00:00 const [startTime, setStartTime] = useState(moment().startOf('day')); // 默认值，当天0点00:00:00
const [endTime, setEndTime] = useState( const [endTime, setEndTime] = useState(
moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值当前时间 moment(new Date(), 'YYYY-MM-DD HH:mm:ss'), // 默认值，当前时间
); );
const [logType, setLogType] = useState(0); // 请求参数，日志类型，默认是正常，0:成功 -1:错误 9999:全部 const [logType, setLogType] = useState(0); // 请求参数，日志类型，默认是正常，0:成功 -1:错误 9999:全部
const [searchWord, setSearchWord] = useState(''); // 关键字
// 计算时间间隔（分钟） // 计算时间间隔（分钟）
const countInterval = () => { const countInterval = () => {
const start = new Date(startTime.format('YYYY-MM-DD HH:mm:ss')).getTime(); 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 end = new Date(endTime.format('YYYY-MM-DD HH:mm:ss')).getTime();
const minuteInterval = (end - start) / (60 * 1000); // 相隔多少分钟 const minuteInterval = (end - start) / (60 * 1000); // 相隔多少分钟
// console.log(hourInterval);
if (minuteInterval <= 30) { if (minuteInterval <= 30) {
setTimeInterval('1'); setTimeInterval('1');
} else if (minuteInterval > 30 && minuteInterval <= 120) { } else if (minuteInterval > 30 && minuteInterval <= 120) {
setTimeInterval('5'); setTimeInterval('2');
} else if (minuteInterval > 120 && minuteInterval <= 60 * 24) { } else if (minuteInterval > 120 && minuteInterval <= 60 * 24) {
setTimeInterval('60'); setTimeInterval('3');
} else { } else {
setTimeInterval('1440'); setTimeInterval('4');
} }
}; };
...@@ -60,8 +63,6 @@ const ServiceLog = () => { ...@@ -60,8 +63,6 @@ const ServiceLog = () => {
title: '调用时间', title: '调用时间',
dataIndex: 'CallTime', dataIndex: 'CallTime',
key: 'CallTime', key: 'CallTime',
// filters: orgFilters,
// onFilter: (value, record) => record.OUName === value,
}, },
{ {
title: 'IP', title: 'IP',
...@@ -117,30 +118,52 @@ const ServiceLog = () => { ...@@ -117,30 +118,52 @@ const ServiceLog = () => {
]; ];
// 在起止时间任意一个变化后获取数据 // 在起止时间任意一个变化后获取数据
useEffect(() => { useEffect(() => {
countInterval(); // countInterval();
if (startTime && endTime) { if (startTime && endTime) {
setLoading(true); setLoading(true);
getData(); getData('/TrafficStatistics', setVisitedCount); // 访问量统计
}
}, [startTime, endTime, logType, timeInterval]);
useEffect(() => {
if (startTime && endTime) {
setLoading(true);
getData('/TopCountList', setPathCount); // 接口调用频次统计
getData('/TopConsumeList', setReponseTime); // 接口平均耗时统计
getData('/GetOMSLog', setDataTable); // 接口调用记录
} }
}, [startTime, endTime, logType]); }, [startTime, endTime, logType]);
const getData = () => {
post(`${PUBLISH_SERVICE}/LogCenter/GetOMSLog`, { // 封装接口请求，参数url/设置方法set
PageIndex: 0, const getData = (url, set) => {
PageSize: 0, post(`${PUBLISH_SERVICE}/LogCenter${url}`, {
// 获取日志表数据时PageSize设置为200，其他接口默认值20
PageSize: url === '/GetOMSLog' ? 200 : 20,
DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'), DateFrom: startTime.format('YYYY-MM-DD HH:mm:ss'),
DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'), DateTo: endTime.format('YYYY-MM-DD HH:mm:ss'),
IP: '', IP: '',
Module: '', Module: url === '/GetOMSLog' ? searchWord : '',
LogType: +logType, LogType: +logType,
Description: '', Description: '',
LoginName: '', LoginName: '',
UserName: '', UserName: '',
StaticsType: +timeInterval,
}) })
.then(res => { .then(res => {
if (res.code === 0) { if (res.code === 0) {
setData0(res.data); if (res.data && res.data.length > 0) {
dataTransforrm(res.data); res.data.map((item, index) => {
// console.log(res.data); item.key = index;
if (url === '/TrafficStatistics') {
item.StartTime = item.StartTime.replace(' ', '-');
}
return item;
});
}
if (res.data === null) {
set([]);
} else {
set(res.data);
}
} else { } else {
notification.error({ notification.error({
message: '数据获取失败', message: '数据获取失败',
...@@ -154,85 +177,6 @@ const ServiceLog = () => { ...@@ -154,85 +177,6 @@ const ServiceLog = () => {
setLoading(false); setLoading(false);
}); });
}; };
const dataTransforrm = data => {
data.map((item, index) => {
item.key = index;
item.Path1 = item.Path;
return item;
});
const dataPerHour = data.map((item, index) => ({
key: index,
minute: item.CallTime.slice(0, 16), // 每分钟minute
hour: item.CallTime.slice(0, 13), // 每分钟minute
date: item.CallTime.slice(0, 10), // 每分钟minute
}));
console.log(dataPerHour);
// 设置坐标轴别名
const scale1 = {
Path: {
alias: '接口调用频次统计', // 别名
},
Path1: {
alias: '接口平均耗时统计', // 别名
},
响应时长: {
alias: '响应时长/ms', // 别名
},
minute: {
alias: '访问量统计',
},
hour: {
alias: '访问量统计',
},
};
setScale(scale1);
const dv = new DataSet.View().source(dataPerHour);
dv.transform({
type: 'aggregate', // 别名summary
fields: ['hour'], // 统计字段集
operations: ['count'], // 统计操作集
as: ['计数'], // 存储字段集
groupBy: ['hour'], // 分组字段集
});
console.log(dv.rows);
setPerMinute(dv.rows);
const dv1 = new DataSet.View().source(data);
dv1
.transform({
type: 'aggregate', // 别名summary
fields: ['Path'], // 统计字段集
operations: ['count'], // 统计操作集
as: ['计数'], // 存储字段集
groupBy: ['Path'], // 分组字段集
})
.transform({
type: 'sort-by',
fields: ['计数'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
order: 'DESC', // 默认为 ASC，DESC 则为逆序
});
console.log(dv1.rows);
setPathCount(dv1.rows.slice(0, 20));
const dv2 = new DataSet.View().source(data);
dv2
.transform({
type: 'aggregate', // 别名summary
fields: ['ConsumerTime'], // 统计字段集
operations: ['mean'], // 统计操作集
as: ['响应时长'], // 存储字段集
groupBy: ['Path'], // 分组字段集
})
.transform({
type: 'sort-by',
fields: ['响应时长'], // 根据指定的字段集进行排序，与lodash的sortBy行为一致
order: 'DESC', // 默认为 ASC，DESC 则为逆序
});
console.log(dv2.rows);
setReponseTime(dv2.rows.slice(0, 20));
};
// DatePicker改变点击确定时 // DatePicker改变点击确定时
const changeStartTime = time => { const changeStartTime = time => {
...@@ -243,7 +187,6 @@ const ServiceLog = () => { ...@@ -243,7 +187,6 @@ const ServiceLog = () => {
}; };
// 近1/6/12/24小时,同时设置对应的时间间隔 // 近1/6/12/24小时,同时设置对应的时间间隔
const setTime = (time, value) => { const setTime = (time, value) => {
// setIntervalText(text);
setTimeInterval(value); setTimeInterval(value);
setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss')); setEndTime(moment(new Date(), 'YYYY-MM-DD HH:mm:ss'));
setStartTime( setStartTime(
...@@ -261,6 +204,11 @@ const ServiceLog = () => { ...@@ -261,6 +204,11 @@ const ServiceLog = () => {
const selectChange = value => { const selectChange = value => {
setTimeInterval(value); setTimeInterval(value);
}; };
// 获取搜索框的值
const handleSearch = e => {
setSearchWord(e.target.value);
// console.log(e.target.value);
};
return ( return (
<> <>
...@@ -287,23 +235,33 @@ const ServiceLog = () => { ...@@ -287,23 +235,33 @@ const ServiceLog = () => {
allowClear={false} allowClear={false}
/> />
<Button onClick={() => setTime(15, '1')}>近15分钟</Button> <Button onClick={() => setTime(15, '1')}>近15分钟</Button>
<Button onClick={() => setTime(60, '5')}>近1小时</Button> <Button onClick={() => setTime(60, '2')}>近1小时</Button>
<Button onClick={() => setTime(12 * 60, '60')}>近12小时</Button> <Button onClick={() => setTime(12 * 60, '3')}>近12小时</Button>
<Button onClick={() => setTime(24 * 60, '60')}>近1天</Button> <Button onClick={() => setTime(24 * 60, '3')}>近1天</Button>
<Button onClick={() => setTime(24 * 7 * 60, '1440')}>近1周</Button> <Button onClick={() => setTime(24 * 7 * 60, '4')}>近1周</Button>
<span style={{ marginLeft: '20px' }}>返回状态：</span> <span style={{ marginLeft: '20px' }}>返回状态：</span>
<Select defaultValue="正常" onChange={changeStatus}> <Select defaultValue="正常" onChange={changeStatus}>
<Option value="9999">全部</Option> <Option value="9999">全部</Option>
<Option value="0">正常</Option> <Option value="0">正常</Option>
<Option value="-1">错误</Option> <Option value="-1">错误</Option>
</Select> </Select>
<Search
// allowClear
style={{ width: 200, marginLeft: '20px' }}
placeholder="请输入接口名称"
onSearch={() => {
getData('/GetOMSLog', setDataTable);
}}
onChange={e => handleSearch(e)}
enterButton
value={searchWord}
/>
</Col> </Col>
</Row> </Row>
<Spin spinning={loading} tip="loading"> <Spin spinning={loading} tip="loading">
<Row style={{ background: 'white' }}> <Row style={{ background: 'white' }}>
<Col offset={6} style={{ paddingTop: '8px' }}> <Col offset={6} style={{ paddingTop: '8px' }}>
<span>间隔：</span> <span>间隔：</span>
{/* value={intervalText} */}
<Select <Select
defaultValue="每小时" defaultValue="每小时"
value={timeInterval} value={timeInterval}
...@@ -311,9 +269,9 @@ const ServiceLog = () => { ...@@ -311,9 +269,9 @@ const ServiceLog = () => {
onChange={selectChange} onChange={selectChange}
> >
<Option value="1">每分钟</Option> <Option value="1">每分钟</Option>
<Option value="5">每5分钟</Option> <Option value="2">每5分钟</Option>
<Option value="60">每小时</Option> <Option value="3">每小时</Option>
<Option value="1440">每天</Option> <Option value="4">每天</Option>
</Select> </Select>
</Col> </Col>
</Row> </Row>
...@@ -321,48 +279,54 @@ const ServiceLog = () => { ...@@ -321,48 +279,54 @@ const ServiceLog = () => {
<Col span={8}> <Col span={8}>
<Chart <Chart
height={300} height={300}
// width={400}
autoFit autoFit
data={perMinute} data={visitedCount}
interactions={['active-region']} interactions={['active-region']}
padding="auto" padding="auto"
scale={scale} scale={{
Count: { alias: '计数' },
StartTime: { alias: '访问量统计' },
}}
> >
<Axis name="hour" label="null" title={{ offset: 20 }} /> <Axis name="StartTime" label="null" title={{ offset: 20 }} />
<Axis name="计数" title /> <Axis name="Count" title />
<Interval position="hour*计数" /> <Interval position="StartTime*Count" />
<Tooltip shared /> <Tooltip shared />
</Chart> </Chart>
</Col> </Col>
<Col span={8}> <Col span={7} offset={1}>
<Chart <Chart
height={300} height={300}
// width={400}
autoFit autoFit
data={pathCount} data={pathCount}
interactions={['active-region']} interactions={['active-region']}
padding="auto" padding="auto"
scale={scale} scale={{
Count: { alias: '计数' },
Path: { alias: '接口调用频次统计' },
}}
> >
<Axis name="Path" label="null" title={{ offset: 20 }} /> <Axis name="Path" label="null" title={{ offset: 20 }} />
<Axis name="计数" title /> <Axis name="Count" title />
<Interval position="Path*计数" /> <Interval position="Path*Count" />
<Tooltip shared /> <Tooltip shared />
</Chart> </Chart>
</Col> </Col>
<Col span={8}> <Col span={7} offset={1}>
<Chart <Chart
height={300} height={300}
// width={400}
autoFit autoFit
data={reponseTime} data={reponseTime}
interactions={['active-region']} interactions={['active-region']}
padding="auto" padding="auto"
scale={scale} scale={{
AvgTime: { alias: '响应时长/ms' },
Path: { alias: '接口平均耗时统计' },
}}
> >
<Axis name="Path" label="null" title={{ offset: 20 }} /> <Axis name="Path" label="null" title={{ offset: 20 }} />
<Axis name="响应时长" title /> <Axis name="AvgTime" title />
<Interval position="Path*响应时长" /> <Interval position="Path*AvgTime" />
<Tooltip shared /> <Tooltip shared />
</Chart> </Chart>
</Col> </Col>
...@@ -372,13 +336,13 @@ const ServiceLog = () => { ...@@ -372,13 +336,13 @@ const ServiceLog = () => {
size="small" size="small"
bordered bordered
columns={columns} columns={columns}
dataSource={data0} dataSource={dataTable}
scroll={{ x: 'max-content' }} scroll={{ x: 'max-content' }}
pagination={{ pagination={{
showTotal: (total, range) => showTotal: (total, range) =>
`第${range[0]}-${range[1]} 条/共 ${total} 条`, `第${range[0]}-${range[1]} 条/共 ${total} 条`,
pageSizeOptions: [10, 20, 50, 100], pageSizeOptions: [10, 20, 50, 100],
defaultPageSize: 10, defaultPageSize: 20,
showQuickJumper: true, showQuickJumper: true,
showSizeChanger: true, showSizeChanger: true,
}} }}
......
src/pages/platformCenter/dictionary/WebDic.js
View file @ 7e5d151d
...@@ -240,7 +240,9 @@ const WebDic = () => { ...@@ -240,7 +240,9 @@ const WebDic = () => {
.then(res => { .then(res => {
if (res.success) { if (res.success) {
getData(select.parentID); getData(select.parentID);
if (select.parentID === '-1') {
setSubData([]); setSubData([]);
}
notification.success({ notification.success({
message: '删除成功', message: '删除成功',
}); });
......
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