修改API监控

src/views/dataSharingAndExchange/ApiMonitor/ApiMonitor.data.ts

-import {getAllRoleList} from '@/api/system/role/role';
+import { getAllRoleList } from '@/api/system/role/role';
 import { BasicColumn, FormSchema } from '@/components/Table';
-import {h} from "vue";
-import {Tag} from "ant-design-vue";
-import { Switch } from 'ant-design-vue';
-import {useMessage} from "@/hooks/web/useMessage";
-import {changeFlagApi} from "@/api/system/user/user"; // 引入开关组件
+import { h } from 'vue';
+import { Tag, Switch } from 'ant-design-vue';
+import { useMessage } from '@/hooks/web/useMessage';
+import { changeFlagApi } from '@/api/system/user/user';
+// 引入开关组件
 type CheckedType = boolean | string | number;
 
-
 export const columns1: BasicColumn[] = [
   {
     title: 'gateway',
@@ -40,12 +39,12 @@ export const searchFormSchema: FormSchema[] = [
     field: 'callBy',
     label: '调用者',
     component: 'Select',
-    labelWidth:50,
+    labelWidth: 50,
     componentProps: {
-      options:[
+      options: [
         {
-          label:'admin',
-          value:'admin'
+          label: 'admin',
+          value: 'admin',
         },
       ],
       placeholder: '请选择调用者',
@@ -55,9 +54,35 @@ export const searchFormSchema: FormSchema[] = [
   {
     field: 'callTime',
     label: '  调用时间',
-    labelWidth:100,
+    labelWidth: 100,
     component: 'DatePicker',
     colProps: { lg: 7, md: 24 },
   },
 ];
-
+export const partitionColumns: BasicColumn[] = [
+  {
+    title: '调用时间',
+    dataIndex: 'date',
+    width: 120,
+  },
+  {
+    title: '调用时长',
+    dataIndex: 'time',
+    width: 120,
+  },
+  {
+    title: 'Http错误码',
+    dataIndex: 'code',
+    width: 120,
+  },
+  {
+    title: '业务错误码',
+    dataIndex: 'bizCode',
+    width: 120,
+  },
+  {
+    title: '调用者',
+    dataIndex: 'user',
+    width: 120,
+  },
+];

src/views/dataSharingAndExchange/ApiMonitor/ApiMonitorData.ts

@@ -311,3 +311,40 @@ export const second4Data = [
   { date: '10/06', value: 333 },
   { date: '10/07', value: 223 },
 ];
+export const partitionData: any[] = [
+  {
+    date: '2024-11-30 08:00',
+    time: '0.25s',
+    code: 200,
+    bizCode: 0,
+    user: 'user1',
+  },
+  {
+    date: '2024-11-30 09:15',
+    time: '1.50s',
+    code: 404,
+    bizCode: 1001,
+    user: 'user2',
+  },
+  {
+    date: '2024-11-30 10:30',
+    time: '0.75s',
+    code: 500,
+    bizCode: 1002,
+    user: 'user3',
+  },
+  {
+    date: '2024-11-30 11:45',
+    time: '0.10s',
+    code: 200,
+    bizCode: 0,
+    user: 'user4',
+  },
+  {
+    date: '2024-11-30 13:00',
+    time: '2.00s',
+    code: 400,
+    bizCode: 1003,
+    user: 'user5',
+  },
+];

src/views/dataSharingAndExchange/ApiMonitor/RightContent6.vue

 <template>
-  <Card :loading="loading">
-    666
-  </Card>
+  <BasicTable @register="registerPartitionTable">
+    <template #bodyCell="{ column }">
+      <template v-if="column.key === 'action'">
+        <TableAction
+          :actions="[
+            {
+              label: '查看日志',
+            },
+          ]"
+        />
+      </template>
+    </template>
+  </BasicTable>
 </template>
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { Tag, Card,Select } from 'ant-design-vue';
-import { BasicTable, useTable, TableAction } from '@/components/Table';
-import {} from "./ApiMonitor.data";
-import {} from "./ApiMonitorData";
-import Icon from '@/components/Icon/Icon.vue';
-
+  import { BasicTable, TableAction, useTable } from '@/components/Table';
+  import { partitionColumns } from '@/views/dataSharingAndExchange/ApiMonitor/ApiMonitor.data';
+  import { partitionData } from '@/views/dataSharingAndExchange/ApiMonitor/ApiMonitorData';
 
+  const [registerPartitionTable] = useTable({
+    title: '调用失败记录',
+    dataSource: partitionData,
+    columns: partitionColumns,
+    pagination: false,
+    showIndexColumn: false,
+    pagination: true,
+    actionColumn: {
+      width: 120,
+      title: '操作',
+      dataIndex: 'action',
+      fixed: 'right',
+    },
+    scroll: { y: 300 },
+  });
 </script>
-<style lang="less" scoped>
-
-</style>
+<style lang="less" scoped></style>