feat：动态拓扑--新增慢业务TOP5

src/api/mapping.js

@@ -1,5 +1,6 @@
 import request from '@/utils/request'
-
+import Request from "@/utils/requestOther"
+const instance = new Request()
 //---------------以下是接口相关------------------
 // 获取业务映射 /api/v1/url-mapping get  start_time:1696726800 end_time:1696730400 app_id:1
 export function listUrlMapping(query) {
@@ -245,4 +246,9 @@ export function urlMappingSublist(query) {
     method: 'get',
     params: query
   })
-}
+}
+// 慢业务接口
+export function getSlowInterfaceData(data){
+  let url = `/api/v1/biz/slowtop`
+  return instance.get(url, data)
+}

src/views/business-analysis/topology/index.vue

@@ -157,6 +157,19 @@
                             </el-row>
                           </div> -->
                           <!-- <div class='look-more' @click='goPath("/service/service/index")'>查看更多<i class="el-icon-d-arrow-right"></i></div> -->
+                          <div class='interface-box' style="padding:0">
+                            <h6 class="h6">慢业务TOP5</h6>
+                            <el-table
+                              v-loading="loading2"
+                              :data="slowBusiInterData"
+                              @row-click="handleRowClickInterFace" 
+                            >
+                              <el-table-column header-align="left" label="业务名称" prop="biz_name" align="left" :show-overflow-tooltip="true"/>
+                              <el-table-column header-align="left" label="起始服务" prop="service_name" align="left" :show-overflow-tooltip="true"/>
+                              <el-table-column header-align="left" label="延迟" prop="duration" align="left" :show-overflow-tooltip="true"/>
+                            </el-table>
+                            <div class='look-more' @click='goPath("/business-analysis/analysis/index")'>查看更多<i class="el-icon-d-arrow-right"></i></div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -304,7 +317,7 @@
 import storage from '@/utils/storage'
 import NoData from "@/views/NoData/nodata"
 import {serviceBar} from "@/api/service"
-import { slowTopUrlMapping } from "@/api/mapping"
+import { slowTopUrlMapping, getSlowInterfaceData } from "@/api/mapping"
 import {dbslowtop} from '@/api/trace'
 import { appsScore } from '@/api/apps'
 export default {
@@ -375,6 +388,8 @@ export default {
         interval: 5,
         req_applist:[],
       },
+      slowBusiInterData:[], // 慢业务接口data
+      loading2: false
     }
   },
   watch:{
@@ -398,6 +413,7 @@ export default {
               this.getdbslowtop();
               this.getServiceBar();
               this.getslowTopUrlMapping();
+              this.getSlowInterfaceFn();
               // this.getList()
             }
             // if(newValue.timeOut){
@@ -502,10 +518,13 @@ export default {
       this.dbslowtopQuery.app_alias = this.appItem.alias;
       this.dbslowtopQuery.start_time = this.appItem.start_time;
       this.dbslowtopQuery.end_time = this.appItem.end_time;
+
       // this.getList()
       this.getAppsScore();
       this.getdbslowtop();
       this.changeQuery('/business-analysis/topology/index',this.appItem.start_time,this.appItem.end_time,this.appItem.live)
+      this.getSlowInterfaceFn()
+
     }
     if(this.$route.query.id != undefined){
       this.appId = this.$route.query.id;
@@ -578,6 +597,7 @@ export default {
         this.getAppsScore();
         this.getslowTopUrlMapping();
         this.getdbslowtop();
+        this.getSlowInterfaceFn()
         // this.getDigitsService();
       },timeOut)
     },
@@ -779,6 +799,16 @@ export default {
           this.loading = false
         }
       })
+    },
+    async getSlowInterfaceFn(){
+      this.loading2 = true
+      const res = await getSlowInterfaceData(this.dbslowtopQuery)
+      if (res && res.code == 200){
+        this.loading2 = false
+        this.slowBusiInterData = res.data
+      } else {
+        this.slowBusiInterData = []
+      }
     }
   },
   beforeDestroy(){
@@ -925,6 +955,7 @@ export default {
 }
 .card-box{
   padding:10px;
+  padding-bottom: 0;
   box-sizing: border-box;
 }
 .service-box{