diff --git a/src/views/monitor/trace/index.vue b/src/views/monitor/trace/index.vue index f6b8e6f..b79ca97 100644 --- a/src/views/monitor/trace/index.vue +++ b/src/views/monitor/trace/index.vue @@ -8,28 +8,7 @@ 立即刷新 - - - diff --git a/src/views/monitor/trace/trace.data.ts b/src/views/monitor/trace/trace.data.ts index 857c57b..f7f0e42 100644 --- a/src/views/monitor/trace/trace.data.ts +++ b/src/views/monitor/trace/trace.data.ts @@ -1,11 +1,15 @@ import { BasicColumn } from '/@/components/Table'; import dayjs from 'dayjs'; +import lodash from 'lodash'; +import { h } from 'vue'; +import { Tag } from 'ant-design-vue'; + export const columns: BasicColumn[] = [ { title: '请求时间', dataIndex: 'timestamp', width: 50, - customRender({text}) { + customRender({ text }) { return dayjs(text).format('YYYY-MM-DD HH:mm:ss'); }, }, @@ -13,23 +17,68 @@ export const columns: BasicColumn[] = [ title: '请求方法', dataIndex: 'request.method', width: 20, - slots: { customRender: 'requestMethod' }, + customRender({ record, column }) { + let value = lodash.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 lodash.get(record, column.dataIndex!); + }, }, { title: '响应状态', dataIndex: 'response.status', width: 50, - slots: { customRender: 'responseStatus' }, + customRender({ record, column }) { + let value = lodash.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, - slots: { customRender: 'timeTaken' }, + customRender({ record, column }) { + let value = lodash.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`); + }, }, ];