From 74b45285bfd1f98c92c39f401cc443bb1162799e Mon Sep 17 00:00:00 2001
From: zhangdaiscott <zhangdaiscott@163.com>
Date: Thu, 22 Sep 2022 23:43:25 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=B7=E6=B1=82=E8=BF=BD=E8=B8=AA=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E7=9B=91=E6=8E=A7=E5=8A=9F=E8=83=BD,=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=80=BC=E9=97=AE=E9=A2=98=EF=BC=88Antdv3=E4=B8=8D?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E6=89=93=E7=82=B9=E8=B0=83=E7=94=A8=E7=9A=84?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F=E4=BA=86=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/monitor/trace/index.vue     | 21 ----------
 src/views/monitor/trace/trace.data.ts | 57 +++++++++++++++++++++++++--
 2 files changed, 53 insertions(+), 25 deletions(-)

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 @@
           <a @click="loadDate">立即刷新</a>
         </div>
       </template>
-      <template #timeTaken="{ record, text }">
-        <a-tag v-if="text < 500" color="green">{{ text }} ms</a-tag>
-        <a-tag v-else-if="text < 1000" color="cyan">{{ text }} ms</a-tag>
-        <a-tag v-else-if="text < 1500" color="orange">{{ text }} ms</a-tag>
-        <a-tag v-else color="red">{{ text }} ms</a-tag>
-      </template>
 
-      <template #responseStatus="{ record, text }">
-        <a-tag v-if="text < 200" color="pink">{{ text }}</a-tag>
-        <a-tag v-else-if="text < 201" color="green">{{ text }}</a-tag>
-        <a-tag v-else-if="text < 399" color="cyan">{{ text }}</a-tag>
-        <a-tag v-else-if="text < 403" color="orange">{{ text }}</a-tag>
-        <a-tag v-else-if="text < 501" color="red">{{ text }}</a-tag>
-        <span v-else>{{ text }}</span>
-      </template>
-      <template #requestMethod="{ record, text }">
-        <a-tag v-if="text === 'GET'" color="#87d068">{{ text }}</a-tag>
-        <a-tag v-else-if="text === 'POST'" color="#2db7f5">{{ text }}</a-tag>
-        <a-tag v-else-if="text === 'PUT'" color="#ffba5a">{{ text }}</a-tag>
-        <a-tag v-else-if="text === 'DELETE'" color="#f50">{{ text }}</a-tag>
-        <span v-else>{{ text }} ms</span>
-      </template>
     </BasicTable>
   </div>
 </template>
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`);
+    },
   },
 ];