CN-812 feat: npm下钻三级菜单网络性能接口,前端对应逻辑优化调整

src/utils/api.js

@@ -172,6 +172,8 @@ export const api = {
       trafficGraph: '/interface/application/performance/overview/drilldown/drilldown/dimension/trafficGraph',
       // 各维度下钻网络性能
       networkAnalysis: '/interface/application/performance/overview/drilldown/dimension/networkAnalysis',
+      // 各维度下钻网络性能 三级菜单
+      allNetworkAnalysis: '/interface/application/performance/overview/drilldown/dimension/allNetworkAnalysis',
       // 下钻地图
       map: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/trafficAnalysis',
       mapTcp: '/interface/application/performance/overview/drilldown/dimension/clientLocations/world/tcpSessionDelay',

src/views/charts2/Panel.vue

@@ -260,6 +260,8 @@ export default {
 
     const queryCondition = ref(query.queryCondition || '')
     const dimensionType = ref(query.dimensionType || '')
+    // 三级菜单判断
+    const tabOperationType = ref(query.tabOperationType)
     const networkOverviewBeforeTab = ref(query.networkOverviewBeforeTab || '')
     return {
       panelType,
@@ -270,6 +272,7 @@ export default {
       path,
       queryCondition,
       dimensionType,
+      tabOperationType,
       networkOverviewBeforeTab
     }
   },
@@ -343,12 +346,13 @@ export default {
     },
     scoreCalculation () {
       let condition = ''
+      let url = ''
       if (this.queryCondition.indexOf(' OR ') > -1) {
         condition = this.queryCondition.split(/["|'](.*?)["|']/)
       } else {
         condition = this.queryCondition
       }
-      const type = this.dimensionType || this.networkOverviewBeforeTab
+      let type = this.dimensionType || this.networkOverviewBeforeTab
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
@@ -382,9 +386,14 @@ export default {
           params.type = type
         }
       }
+      if (parseFloat(this.tabOperationType) === 3) {
+        url = api.npm.overview.allNetworkAnalysis
+      } else {
+        url = api.npm.overview.networkAnalysis
+      }
       if ((type && condition) || type) {
         params.type = params.type || type
-        get(api.npm.overview.networkAnalysis, params).then(res => {
+        get(url, params).then(res => {
           if (res.code === 200) {
             const data = {
               establishLatencyMs: res.data.result.establishLatencyMsAvg || null,

src/views/charts2/charts/npm/NpmNetworkQuantity.vue

@@ -27,11 +27,13 @@ export default {
     const queryCondition = ref(query.queryCondition || '')
     const dimensionType = ref(query.dimensionType || '')
     const tabIndex = ref(query.tabIndex)
+    const tabOperationType = ref(query.tabOperationType)
     const networkOverviewBeforeTab = ref(query.networkOverviewBeforeTab || '')
     return {
       queryCondition,
       dimensionType,
       tabIndex,
+      tabOperationType,
       networkOverviewBeforeTab
     }
   },
@@ -63,6 +65,7 @@ export default {
   methods: {
     npmNetworkCycleQuery () {
       let condition = ''
+      let url = ''
       if (this.queryCondition.indexOf(' OR ') > -1) {
         condition = this.queryCondition.split(/["|'](.*?)["|']/)
       } else {
@@ -107,14 +110,19 @@ export default {
           params.type = type
         }
       }
+      if (parseFloat(this.tabOperationType) === 3) {
+        url = api.npm.overview.allNetworkAnalysis
+      } else {
+        url = api.npm.overview.networkAnalysis
+      }
       if ((type && condition) || type) {
         params.type = params.type || type
         this.toggleLoading(true)
-        get(api.npm.overview.networkAnalysis, params).then(res => {
+        get(url, params).then(res => {
           if (res.code === 200) {
             this.npmNetworkCycleData = res.data.result
           }
-          this.npmNetworkLastCycleQuery()
+          this.npmNetworkLastCycleQuery(url, params)
         }).catch(e => {
           this.toggleLoading(false)
         })
@@ -148,104 +156,20 @@ export default {
         })
       }
     },
-    npmNetworkLastCycleQuery () {
+    npmNetworkLastCycleQuery (url, param) {
-      let condition = ''
-      if (this.queryCondition.indexOf(' OR ') > -1) {
-        condition = this.queryCondition.split(/["|'](.*?)["|']/)
-      } else {
-        condition = this.queryCondition
-      }
-      const type = this.dimensionType || this.networkOverviewBeforeTab
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
         cycle: 1
       }
-      if (this.tabIndex == 0) {
+      if (param && param.type && param.q) {
-        this.side = 'client'
+        params.type = param.type
-      } else if (this.tabIndex == 1) {
+        params.q = param.q
-        this.side = 'server'
       }
-      if (condition && (typeof condition !== 'object') && type) {
+      if ((params.type && params.q) || (param && param.type)) {
-        if (type === 'clientIp') {
+        params.type = params.type || param.type
-          params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='client'`
-        } else if (type === 'serverIp') {
-          params.q = `ip='${condition.split(/'(.*?)'/)[1]}' and side='server'`
-        } else if (type === 'clientCity') {
-          params.q = `client_city='${condition.split(/'(.*?)'/)[1]}'`
-        } else if (type === 'serverCity') {
-          params.q = `server_city='${condition.split(/'(.*?)'/)[1]}'`
-        } else {
-          params.q = condition
-        }
-        params.type = type
-      } else if (condition.length > 1 && type && type === 'ip') {
-        params.q = `${type}='${condition[1]}' and side='${this.side}'`
-        params.type = type
-      } else if (condition.length > 1 && type && type !== 'ip') {
-        if (type === 'country' || type === 'asn' || type === 'province' || type === 'city' || type === 'isp') {
-          params.q = `${type}='${condition[1]}'`
-          params.type = type
-        } else if (type === 'idcRenter') {
-          params.q = `idc_renter='${condition[1]}'`
-          params.type = type
-        } else {
-          params.q = `${condition[0]}'${condition[1]}'`
-          params.type = type
-        }
-      }
-      if ((type && condition) || type) {
-        params.type = params.type || type
         this.toggleLoading(true)
-        get(api.npm.overview.networkAnalysis, params).then(res => {
+        get(url, params).then(res => {
-          // if (res.code === 200) {
-          //   this.npmNetworkLastCycleData = res.data.result
-          //   let timer = null
-          //   if (timer) {
-          //     clearTimeout(timer)
-          //   }
-          //   timer = setTimeout(() => {
-          //     this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
-          //   }, 300)
-          // }
-          if (res.code === 200) {
-            this.npmNetworkLastCycleData = res.data.result
-          } else {
-            this.npmNetworkLastCycleData = [res]
-          }
-          let timer = null
-          if (timer) {
-            clearTimeout(timer)
-          }
-          timer = setTimeout(() => {
-            this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
-          }, 300)
-        }).catch((e) => {
-          let timer = null
-          if (timer) {
-            clearTimeout(timer)
-          }
-          this.npmNetworkLastCycleData = [e]
-          timer = setTimeout(() => {
-            this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
-          }, 300)
-        }).finally(() => {
-          this.toggleLoading(false)
-        })
-      } else if (!type && !condition && this.networkOverviewBeforeTab) {
-        this.toggleLoading(true)
-        params.type = this.networkOverviewBeforeTab
-        get(api.npm.overview.networkAnalysis, params).then(res => {
-          // if (res.code === 200) {
-          //   this.npmNetworkLastCycleData = res.data.result
-          //   let timer = null
-          //   if (timer) {
-          //     clearTimeout(timer)
-          //   }
-          //   timer = setTimeout(() => {
-          //     this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 0)
-          //   }, 300)
-          // }
           if (res.code === 200) {
             this.npmNetworkLastCycleData = res.data.result
           } else {