85 lines
2.0 KiB
TypeScript
85 lines
2.0 KiB
TypeScript
import { BasicColumn } from '/@/components/Table';
|
|
import dayjs from 'dayjs';
|
|
import _get from 'lodash.get';
|
|
import { h } from 'vue';
|
|
import { Tag } from 'ant-design-vue';
|
|
|
|
export const columns: BasicColumn[] = [
|
|
{
|
|
title: '请求时间',
|
|
dataIndex: 'timestamp',
|
|
width: 50,
|
|
customRender({ text }) {
|
|
return dayjs(text).format('YYYY-MM-DD HH:mm:ss');
|
|
},
|
|
},
|
|
{
|
|
title: '请求方法',
|
|
dataIndex: 'request.method',
|
|
width: 20,
|
|
customRender({ record, column }) {
|
|
let value = _get(record, column.dataIndex!);
|
|
let color = '';
|
|
if (value === 'GET') {
|
|
color = '#87d068';
|
|
}
|
|
if (value === 'POST') {
|
|
color = '#2db7f5';
|
|
}
|
|
if (value === 'PUT') {
|
|
color = '#ffba5a';
|
|
}
|
|
if (value === 'DELETE') {
|
|
color = '#ff5500';
|
|
}
|
|
return h(Tag, { color }, () => value);
|
|
},
|
|
},
|
|
{
|
|
title: '请求URL',
|
|
dataIndex: 'request.uri',
|
|
width: 200,
|
|
customRender({ record, column }) {
|
|
return _get(record, column.dataIndex!);
|
|
},
|
|
},
|
|
{
|
|
title: '响应状态',
|
|
dataIndex: 'response.status',
|
|
width: 50,
|
|
customRender({ record, column }) {
|
|
let value = _get(record, column.dataIndex!);
|
|
let color = '';
|
|
if (value < 200) {
|
|
color = 'pink';
|
|
} else if (value < 201) {
|
|
color = 'green';
|
|
} else if (value < 399) {
|
|
color = 'cyan';
|
|
} else if (value < 403) {
|
|
color = 'orange';
|
|
} else if (value < 501) {
|
|
color = 'red';
|
|
}
|
|
return h(Tag, { color }, () => value);
|
|
},
|
|
},
|
|
{
|
|
title: '请求耗时',
|
|
dataIndex: 'timeTaken',
|
|
width: 50,
|
|
customRender({ record, column }) {
|
|
let value = _get(record, column.dataIndex!);
|
|
let color = 'red';
|
|
if (value < 500) {
|
|
color = 'green';
|
|
} else if (value < 1000) {
|
|
color = 'cyan';
|
|
} else if (value < 1500) {
|
|
color = 'orange';
|
|
}
|
|
return h(Tag, { color }, () => `${value} ms`);
|
|
},
|
|
},
|
|
];
|