前端监控完成

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

@@ -1,15 +1,21 @@
 <template>
   <section class="AppApiMonitor">
     <ai-list>
-      <ai-title slot="title" :title="$options.label" isShowBottomBorder/>
+      <ai-title slot="title" :title="$options.label" isShowBottomBorder>
+        <template #rightBtn>
+          <el-button @click="page.current=1,getStaData(),getTableData()">刷新</el-button>
+        </template>
+      </ai-title>
       <template #blank>
-        <el-row type="flex">
-          <ai-card title="接口异常分布">
-            <ai-echart/>
+        <el-row type="flex" class="topRow">
+          <ai-card title="接口异常分布" headerPanel>
+            <ai-echart class="sta" type="pie" :data="sta.distribution"/>
+          </ai-card>
+          <ai-card class="fill mar-l16" title="接口异常TOP10" headerPanel>
+            <ai-table :tableData="sta.top10" :colConfigs="top10Columns" :isShowPagination="false" tableSize="mini"/>
           </ai-card>
-          <ai-card class="fill mar-l16" title="接口异常TOP10"></ai-card>
         </el-row>
-        <ai-card panel>
+        <ai-card panel class="mar-t16">
           <ai-search-bar>
             <template #left>
               <ai-select placeholder="状态码" v-model="search.status" :selectList="networkStatus" @change="page.current=1,getTableData()"/>
@@ -18,11 +24,19 @@
               <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-table :tableData="tableData" :colConfigs="columns" :current.sync="page.current" :size.sync="page.size" :total="page.total"
+                    @getList="getTableData" :dict="dict">
+            <el-table-column slot="expand" type="expand">
+              <template slot-scope="{row}">
+                <ai-wrapper>
+                  <ai-info-item labelWidth="100px" v-for="op in desConfigs" :key="op.prop" :value="row[op.prop]" v-bind="op"/>
+                </ai-wrapper>
+              </template>
+            </el-table-column>
+          </ai-table>
         </ai-card>
       </template>
     </ai-list>
-
   </section>
 </template>
 
@@ -44,15 +58,24 @@ export default {
       tableData: [],
       page: {current: 1},
       search: {},
-      columns: [
-        {label: "状态码", prop: "status"},
+      sta: {top10: [], distribution: []},
+      top10Columns: [
         {label: "接口地址", prop: "path"},
+        {label: "次数", prop: "total", width: 80, align: 'center'},
+        {label: "创建时间", prop: "createTime", width: 160},
+      ],
+      columns: [
+        {slot: 'expand'},
+        {label: "接口地址", prop: "path"},
+        {label: "状态码", prop: "status", width: 100, align: 'center'},
+        {label: "创建时间", prop: "createTime", width: 160},
         {label: "错误信息", prop: "error"},
+      ],
+      desConfigs: [
         {label: "终端", prop: "device"},
-        {label: "页面", prop: "url"},
-        {label: "用户", prop: "userName"},
         {label: "环境", prop: "nodeProcess"},
-        {label: "创建时间", prop: "createTime"},
+        {label: "页面", prop: "url", isLine: true},
+        {label: "错误信息", prop: "error", isLine: true},
       ],
       networkStatus: [
         {dictValue: 200, dictName: '200:成功'},
@@ -74,15 +97,28 @@ export default {
           this.page.total = res.data.total
         }
       })
+    },
+    getStaData() {
+      this.instance.post("/node/monitorApi/sta").then(res => {
+        if (res?.data) {
+          this.sta = res.data
+        }
+      })
     }
   },
   created() {
     this.getTableData()
+    this.getStaData()
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .AppApiMonitor {
+
+  .sta {
+    width: 400px;
+    height: 300px;
+  }
 }
 </style>