请求追踪数据监控功能,显示值问题（Antdv3不支持打点调用的方式了）

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>

src/views/monitor/trace/trace.data.ts

@@ -1,5 +1,9 @@
 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: '请求时间',
@@ -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`);
+    },
   },
 ];