先提交一下前端监控机器人--观察者

project/oms/apps/sentry/AppApiMonitor/AppApiMonitor.vue

@@ -4,13 +4,21 @@
       <ai-title slot="title" :title="$options.label" isShowBottomBorder/>
       <template #blank>
         <el-row type="flex">
-          <ai-card title="接口异常分布"></ai-card>
+          <ai-card title="接口异常分布">
+            <ai-echart/>
+          </ai-card>
           <ai-card class="fill mar-l16" title="接口异常TOP10"></ai-card>
         </el-row>
-        <ai-card title="所有异常接口">
-          <ai-table :tableData="tableData" :colConfigs="columns">
-
-          </ai-table>
+        <ai-card panel>
+          <ai-search-bar>
+            <template #left>
+              <ai-select placeholder="状态码" v-model="search.status" :selectList="networkStatus" @change="page.current=1,getTableData()"/>
+            </template>
+            <template #right>
+              <el-input v-model="search.name" size="small" placeholder="搜索接口" clearable @change="page.current=1,getTableData()"/>
+            </template>
+          </ai-search-bar>
+          <ai-table :tableData="tableData" :colConfigs="columns" :pageConfig.sync="page" @getList="getTableData" :dict="dict"/>
         </ai-card>
       </template>
     </ai-list>
@@ -19,26 +27,57 @@
 </template>
 
 <script>
+import AiSearchBar from "dui/packages/layout/AiSearchBar";
+import AiSelect from "dui/packages/basic/AiSelect";
+
 export default {
   name: "AppApiMonitor",
+  components: {AiSelect, AiSearchBar},
   label: "接口监控",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
   data() {
     return {
       tableData: [],
+      page: {current: 1},
+      search: {},
       columns: [
         {label: "状态码", prop: "status"},
-        {label: "接口地址", prop: "status"},
-        {label: "错误信息", prop: "status"},
-        {label: "终端", prop: "status"},
-        {label: "页面", prop: "status"},
-        {label: "用户", prop: "status"},
-        {label: "环境", prop: "status"},
-        {label: "事件", prop: "status"},
+        {label: "接口地址", prop: "path"},
+        {label: "错误信息", prop: "error"},
+        {label: "终端", prop: "device"},
+        {label: "页面", prop: "url"},
+        {label: "用户", prop: "userName"},
+        {label: "环境", prop: "nodeProcess"},
+        {label: "创建时间", prop: "createTime"},
+      ],
+      networkStatus: [
+        {dictValue: 200, dictName: '200:成功'},
+        {dictValue: 500, dictName: '500:接口失败'},
+        {dictValue: 401, dictName: '401:token失效'},
+        {dictValue: 403, dictName: '403:未授权访问'},
+        {dictValue: 404, dictName: '404:无法找到接口'},
+        {dictValue: 504, dictName: '504:接口超时'},
       ]
     }
   },
-  methods: {},
+  methods: {
+    getTableData() {
+      this.instance.post("/node/monitorApi/list", null, {
+        params: {...this.page, ...this.search}
+      }).then(res => {
+        if (res?.data) {
+          this.tableData = res.data.records
+          this.page.total = res.data.total
+        }
+      })
+    }
+  },
   created() {
+    this.getTableData()
   }
 }
 </script>