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 @@
立即刷新
-
- {{ text }} ms
- {{ text }} ms
- {{ text }} ms
- {{ text }} ms
-
-
- {{ text }}
- {{ text }}
- {{ text }}
- {{ text }}
- {{ text }}
- {{ text }}
-
-
- {{ text }}
- {{ text }}
- {{ text }}
- {{ text }}
- {{ text }} ms
-
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`);
+ },
},
];