fix: 优化精简代码

src/utils/static-data.js

@@ -217,3 +217,56 @@ export const dataForDnsTrafficLine = {
     { analysis: {}, name: 'network.outbound', class: 'outbound', show: true, invertTab: true, positioning: 2, data: [], unitType: '' }
   ]
 }
+
+export const dataForNpmEventsHeader = {
+  chartData: [
+    {
+      eventSeverity: 'critical',
+      count: '-',
+      index: 0
+    },
+    {
+      eventSeverity: 'high',
+      count: '-',
+      index: 1
+    },
+    {
+      eventSeverity: 'medium',
+      count: '-',
+      index: 2
+    },
+    {
+      eventSeverity: 'low',
+      count: '-',
+      index: 3
+    },
+    {
+      eventSeverity: 'info',
+      count: '-',
+      index: 4
+    }
+  ]
+}
+
+export const dataForNpmRecentEvents = {
+  customTableTitles: [
+    { label: 'network.severity', prop: 'eventSeverity' },
+    { label: 'network.entity', prop: 'eventKey' },
+    { label: 'detections.eventType', prop: 'eventType' }
+  ],
+  // 下钻后
+  customTableTitles1: [
+    { label: 'network.severity', prop: 'eventSeverity' },
+    { label: 'detections.eventType', prop: 'eventType' },
+    { label: 'detection.list.startTime', prop: 'startTime' }
+  ]
+}
+export const dataForNpmNetworkQuantity = {
+  npmNetworkName: [
+    { name: 'networkAppPerformance.tcpConnectionEstablishLatency' },
+    { name: 'networkAppPerformance.httpResponse' },
+    { name: 'networkAppPerformance.sslResponseLatency' },
+    { name: 'networkAppPerformance.packetLoss' },
+    { name: 'overall.packetRetrans' }
+  ]
+}

src/utils/tools.js

@@ -1194,6 +1194,48 @@ export function getQueryByType (type, condition) {
     case 'serverCity': {
       return `server_city='${condition.split(/'(.*?)'/)[1]}'`
     }
-    default: return condition
+    default: {
+      return condition
+    }
+  }
+}
+/**
+ 根据EventSeverity获取对应的键值index
+ */
+export function getIndexByEventSeverity (type) {
+  switch (type) {
+    case 'critical': {
+      return 0
+    }
+    case 'high': {
+      return 1
+    }
+    case 'medium': {
+      return 2
+    }
+    case 'low': {
+      return 3
+    }
+    case 'info': {
+      return 4
+    }
+  }
+}
+
+export function getQueryByFlag2 (type, condition) {
+  switch (type) {
+    case 'country':
+    case 'asn':
+    case 'province':
+    case 'city':
+    case 'isp': {
+      return `${type}='${condition[1]}'`
+    }
+    case 'idcRenter': {
+      return `idc_renter='${condition[1]}'`
+    }
+    default: {
+      return `${condition[0]}'${condition[1]}'`
+    }
   }
 }

src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue

@@ -109,11 +109,7 @@ export default {
           }
         }
       } else {
-        if (n === 0) {
+        url = n === 0 ? api.linkMonitor.quadrupleIngressAnalysis : api.linkMonitor.quadrupleEgressAnalysis
-          url = api.linkMonitor.quadrupleIngressAnalysis // 入口
-        } else {
-          url = api.linkMonitor.quadrupleEgressAnalysis // 出口
-        }
       }
       this.toggleLoading(true)
       axios.get(url, { params: params }).then(res => {
@@ -463,15 +459,8 @@ export default {
   beforeUnmount () {
     clearTimeout(this.timer)
     window.removeEventListener('resize', this.resize)
-    if (this.myChart) {
+    this.myChart && this.myChart.dispose()
-      this.myChart.dispose()
+    this.myChart2 && this.myChart2.dispose()
-      // 避免不能生效
-      this.myChart = null
-    }
-    if (this.myChart2) {
-      this.myChart2.dispose()
-      this.myChart2 = null
-    }
     this.chartOption = null
 
     this.cnLinkInfo = null

src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue

@@ -184,14 +184,11 @@ export default {
             this.initData(res.data.result, newVal, active, show, n)
           }
         } else {
-          this.showError = true
+          this.httpError(res)
-          this.errorMsg = this.errorMsgHandler(res)
         }
       }).catch(e => {
         console.error(e)
-        this.isNoData = false
+        this.httpError(e)
-        this.showError = true
-        this.errorMsg = this.errorMsgHandler(e)
       }).finally(() => {
         this.toggleLoading(false)
       })
@@ -542,6 +539,11 @@ export default {
           this.$store.commit('setRangeEchartsData', rangeObj)
         }
       }
+    },
+    httpError (e) {
+      this.isNoData = false
+      this.showError = true
+      this.errorMsg = this.errorMsgHandler(e)
     }
   },
   mounted () {

src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue

@@ -32,6 +32,7 @@ import { getSecond } from '@/utils/date-util'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import chartMixin from '@/views/charts2/chart-mixin'
 import ChartError from '@/components/common/Error'
+import { getIndexByEventSeverity } from '@/utils/tools'
 export default {
   name: 'NetworkOverviewPerformanceEvent',
   setup () {
@@ -81,18 +82,9 @@ export default {
             } else {
               this.isNoData = false
             }
+            
             res.data.data.result = res.data.data.result.map(t => {
-              if (t.eventSeverity === 'critical') {
+              t.index = getIndexByEventSeverity(t.eventSeverity)
-                t.index = 0
-              } else if (t.eventSeverity === 'high') {
-                t.index = 1
-              } else if (t.eventSeverity === 'medium') {
-                t.index = 1
-              } else if (t.eventSeverity === 'low') {
-                t.index = 3
-              } else if (t.eventSeverity === 'info') {
-                t.index = 4
-              }
               return {
                 name: t.eventSeverity,
                 value: t.count,
@@ -138,11 +130,7 @@ export default {
                 value: t.count
               }
             })
-            if (res.data.data.result.length <= 0) {
+            this.chartOption2.legend.show = res.data.data.result.length > 0
-              this.chartOption2.legend.show = false
-            } else {
-              this.chartOption2.legend.show = true
-            }
             this.chartOption2.series[0].data = res.data.data.result
             this.myChart2.setOption(this.chartOption2)
           } else {
@@ -183,7 +171,7 @@ export default {
       this.toggleLoading(n)
     },
     timeFilter: {
-      handler (n) {
+      handler () {
         this.init()
       }
     }
@@ -199,14 +187,8 @@ export default {
     window.removeEventListener('resize', this.resize)
     const dom = document.getElementById('chart1')
     const dom2 = document.getElementById('chart2')
-    if (dom) {
+    dom && echarts.dispose(dom)
-      echarts.dispose(dom)
+    dom2 && echarts.dispose(dom2)
-    }
-    if (dom2) {
-      echarts.dispose(dom2)
-    }
-    this.myChart = null
-    this.myChart2 = null
   }
 }
 </script>

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

@@ -17,6 +17,7 @@ import { api } from '@/utils/api'
 import chartMixin from '@/views/charts2/chart-mixin'
 import ChartError from '@/components/common/Error'
 import axios from 'axios'
+import { dataForNpmEventsHeader } from '@/utils/static-data'
 
 export default {
   name: 'NpmEventsHeader',
@@ -24,33 +25,7 @@ export default {
   mixins: [chartMixin],
   data () {
     return {
-      chartData: [
+      chartData: dataForNpmEventsHeader.chartData,
-        {
-          eventSeverity: 'critical',
-          count: '-',
-          index: 0
-        },
-        {
-          eventSeverity: 'high',
-          count: '-',
-          index: 1
-        },
-        {
-          eventSeverity: 'medium',
-          count: '-',
-          index: 2
-        },
-        {
-          eventSeverity: 'low',
-          count: '-',
-          index: 3
-        },
-        {
-          eventSeverity: 'info',
-          count: '-',
-          index: 4
-        }
-      ],
       type: 'severity',
       showError: false,
       errorMsg: ''

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

@@ -13,7 +13,7 @@ import { ref, shallowRef } from 'vue'
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
 import { computeScore, getGeoData } from '@/utils/tools'
-import { storageKey, unitTypes, curTabState } from '@/utils/constants'
+import { curTabState, storageKey, unitTypes } from '@/utils/constants'
 import { valueToRangeValue } from '@/utils/unit-convert'
 import { getSecond } from '@/utils/date-util'
 import { api, getData } from '@/utils/api'
@@ -21,6 +21,7 @@ import { get } from '@/utils/http'
 import chartMixin from '@/views/charts2/chart-mixin'
 import { useRoute } from 'vue-router'
 import ChartError from '@/components/common/Error'
+
 export default {
   name: 'NpmIpMap',
   components: { ChartError },
@@ -117,8 +118,7 @@ export default {
               res2.forEach((r, i) => {
                 if (r.code === 200) {
                   mapData.forEach(t => {
-                    const find = r.data.result.find(d => d.country === t.country)
+                    t[keyPre[i] + 'Score'] = r.data.result.find(d => d.country === t.country)
-                    t[keyPre[i] + 'Score'] = find
                   })
                 } else {
                   this.showError = true

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

@@ -184,7 +184,6 @@ export default {
         })
       } catch (e) {
         this.showError = true
-        // todo 此处错误信息有待考证，后续可能会改动
         this.errorMsg = this.errorMsgHandler(e)
         console.error(e)
       }

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

@@ -59,12 +59,13 @@ import { getSecond } from '@/utils/date-util'
 import { api } from '@/utils/api'
 import chartMixin from '@/views/charts2/chart-mixin'
 import _ from 'lodash'
-import { getChainRatio } from '@/utils/tools'
+import { getChainRatio, getQueryByFlag2, getQueryByType } from '@/utils/tools'
 import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import { unitTypes } from '@/utils/constants'
 import unitConvert from '@/utils/unit-convert'
 import axios from 'axios'
+import { dataForNpmNetworkQuantity } from '@/utils/static-data'
 export default {
   name: 'NpmNetworkQuantity',
   mixins: [chartMixin],
@@ -87,13 +88,7 @@ export default {
     return {
       unitTypes,
       unitConvert,
-      npmNetworkName: [
+      npmNetworkName: dataForNpmNetworkQuantity.npmNetworkName,
-        { name: 'networkAppPerformance.tcpConnectionEstablishLatency' },
-        { name: 'networkAppPerformance.httpResponse' },
-        { name: 'networkAppPerformance.sslResponseLatency' },
-        { name: 'networkAppPerformance.packetLoss' },
-        { name: 'overall.packetRetrans' }
-      ],
       npmNetworkCycleData: [],
       npmNetworkLastCycleData: [],
       newNpmNetworkData: [],
@@ -128,11 +123,13 @@ export default {
         endTime: getSecond(this.timeFilter.endTime),
         cycle: 0
       }
+
       if (parseFloat(this.tabIndex) === 0) {
         this.side = 'client'
       } else if (parseFloat(this.tabIndex) === 1) {
         this.side = 'server'
       }
+
       if (condition && (typeof condition !== 'object') && type) { // 判断 condition 不为空并且不为对象 type 不为空
         if (type === 'clientIp' || type === 'serverIp') { // type  = clientIp || serverIp
           if (parseFloat(this.tabIndex) === 0) { // npm 下钻 tabIndex 为 0
@@ -140,37 +137,20 @@ export default {
           } else if (parseFloat(this.tabIndex) === 1) { // npm 下钻 tabIndex 为 1
             type = 'serverIp'
           }
-          params.q = `ip='${condition.split(/'(.*?)'/)[1]}'` // 拼接字段作为参数
-        } 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
+        params.q = getQueryByType(type, condition)
       } else if (condition.length > 1 && type && type === 'ip') { // condition 为数组时数组长度不为 0 | type 不为空 | type为ip
         params.q = `${type}='${condition[1]}' and side='${this.side}'` // 拼接字段作为参数
-        params.type = type
       } else if (condition.length > 1 && type && type !== 'ip') { // condition 为数组时数组长度不为 0 | type 不为空 | type不为ip
-        if (type === 'country' || type === 'asn' || type === 'province' || type === 'city' || type === 'isp') { // 根据接口所需，调整参数
+        params.q = getQueryByFlag2(type, condition)
-          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
-        }
       }
+      params.type = type
+
       // 区分 3 级菜单和 2 级菜单使用不同的 url
-      if (parseFloat(this.tabOperationType) === 3) {
+      url = parseFloat(this.tabOperationType) === 3 ? api.npm.overview.allNetworkAnalysis : api.npm.overview.networkAnalysis
-        url = api.npm.overview.allNetworkAnalysis
+
-      } else {
+      // if ((type && condition) || type) {
-        url = api.npm.overview.networkAnalysis
+      if (condition || type) {
-      }
-      if ((type && condition) || type) {
         params.type = params.type || type
         this.toggleLoading(true)
         axios.get(url, { params: params }).then(res => {
@@ -265,7 +245,6 @@ export default {
             this.npmNetworkQuantity(this.npmNetworkCycleData, this.npmNetworkLastCycleData, 1)
           })
         }).catch((e) => {
-          // todo 此处的e可能为数组
           if (e instanceof Array) {
             e.forEach(t => {
               this.npmNetworkLastCycleData.push(t)

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

@@ -55,6 +55,7 @@ import { useRoute } from 'vue-router'
 import { ref } from 'vue'
 import ChartError from '@/components/common/Error'
 import axios from 'axios'
+import { dataForNpmRecentEvents } from '@/utils/static-data'
 
 export default {
   name: 'NpmRecentEvents',
@@ -72,11 +73,7 @@ export default {
   data () {
     return {
       tableData: [],
-      customTableTitles: [
+      customTableTitles: dataForNpmRecentEvents.customTableTitles,
-        { label: 'network.severity', prop: 'eventSeverity' },
-        { label: 'network.entity', prop: 'eventKey' },
-        { label: 'detections.eventType', prop: 'eventType' }
-      ],
       showError: false,
       errorMsg: ''
     }
@@ -99,20 +96,18 @@ export default {
         endTime: getSecond(this.timeFilter.endTime),
         limit: 8
       }
+
       if (condition && condition.length > 1 && this.dimensionType) {
         params.param = condition[1]
         params.type = this.dimensionType
         if (params.type === 'serverIp' || params.type === 'clientIp') params.type = 'ip'
         params.limit = 10
         url = api.npm.events.recentEventsD
-        this.customTableTitles = [
+        this.customTableTitles = dataForNpmRecentEvents.customTableTitles1
-          { label: 'network.severity', prop: 'eventSeverity' },
-          { label: 'detections.eventType', prop: 'eventType' },
-          { label: 'detection.list.startTime', prop: 'startTime' }
-        ]
       } else {
         url = api.npm.events.recentEvents
       }
+
       this.toggleLoading(true)
       axios.get(url, { params: params }).then(res => {
         res = res.data
@@ -126,14 +121,10 @@ export default {
           })
           this.tableData = res.data.result
         } else {
-          this.isNoData = false
+          this.httpError(res)
-          this.showError = true
-          this.errorMsg = this.errorMsgHandler(res)
         }
       }).catch(e => {
-        this.isNoData = false
+        this.httpError(e)
-        this.showError = true
-        this.errorMsg = this.errorMsgHandler(e)
       }).finally(() => {
         this.toggleLoading(false)
       })
@@ -145,11 +136,7 @@ export default {
      */
     splitEventKey (key) {
       let name = ''
-      if (key) {
+      name = key ? key.split(' ')[0] : '-'
-        name = key.split(' ')[0]
-      } else {
-        name = '-'
-      }
       return name
     },
     jumpPage (item) {
@@ -191,6 +178,11 @@ export default {
         historyList.push(tempObj)
       }
       this.$store.commit('setRouterHistoryList', historyList)
+    },
+    httpError (res) {
+      this.isNoData = false
+      this.showError = true
+      this.errorMsg = this.errorMsgHandler(res)
     }
   },
   mounted () {

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

@@ -48,11 +48,7 @@ export default {
   emits: ['tabChange'],
   watch: {
     currentTab (n) {
-      const { query } = this.$route
+      this.reloadUrl(n)
-      const newUrl = urlParamsHandler(window.location.href, query, {
-        tabIndex: n
-      })
-      overwriteUrl(newUrl)
 
       this.$nextTick(() => {
         this.handleActiveBar(n)
@@ -130,11 +126,8 @@ export default {
             self.currentTab = JSON.stringify(curTabIndex)
             self.isCurTabReady = true
             // URL中tabIndex的设置，client初始化时查询条件需要：side条件
-            const { query } = this.$route
+            self.reloadUrl(self.currentTab)
-            const newUrl = urlParamsHandler(window.location.href, query, {
+
-              tabIndex: self.currentTab
-            })
-            overwriteUrl(newUrl)
             setTimeout(() => {
               self.handleActiveBar(self.currentTab)
             }, 400)
@@ -152,11 +145,7 @@ export default {
       }
     },
     handleClick (tab) {
-      const { query } = this.$route
+      this.reloadUrl(tab.index)
-      const newUrl = urlParamsHandler(window.location.href, query, {
-        tabIndex: tab.index
-      })
-      overwriteUrl(newUrl)
     },
     handleActiveBar (index) {
       const tabDom = document.getElementById('tab-' + index)
@@ -177,6 +166,13 @@ export default {
       this.tabs[n].disable = false
       const tabEle = document.getElementById('tab-' + n)
       tabEle.style.cssText = 'cursor: pointer;'
+    },
+    reloadUrl (index) {
+      const { query } = this.$route
+      const newUrl = urlParamsHandler(window.location.href, query, {
+        tabIndex: index
+      })
+      overwriteUrl(newUrl)
     }
   },
   mounted () {

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

@@ -48,7 +48,7 @@ import {
   getLineIndexUnit2,
   overwriteUrl,
   urlParamsHandler,
-  getQueryByType
+  getQueryByType, getQueryByFlag2
 } from '@/utils/tools'
 import ChartError from '@/components/common/Error'
 import { dataForNpmTrafficLine } from '@/utils/static-data'
@@ -148,16 +148,7 @@ export default {
       } else if (condition.length > 1 && type && type === 'ip') {
         params.q = `${type}='${condition[1]}' and side='${this.side}'`
       } else if (condition.length > 1 && type && type !== 'ip') {
-        const typeList = ['country', 'asn', 'province', 'city', 'isp']
+        params.q = getQueryByFlag2(type, condition)
-        const typeFlag = typeList.find(t => type === t)
-
-        if (typeFlag) {
-          params.q = `${type}='${condition[1]}'`
-        } else if (type === 'idcRenter') {
-          params.q = `idc_renter='${condition[1]}'`
-        } else {
-          params.q = `${condition[0]}'${condition[1]}'`
-        }
       }
 
       this.toggleLoading(true)
@@ -174,14 +165,10 @@ export default {
               this.initLineData(res.data.result, val)
             }
           } else {
-            this.isNoData = false
+            this.httpError(res)
-            this.showError = true
-            this.errorMsg = this.errorMsgHandler(res)
           }
         }).catch(e => {
-          this.isNoData = false
+          this.httpError(e)
-          this.showError = true
-          this.errorMsg = this.errorMsgHandler(e)
           console.error(e)
         }).finally(() => {
           this.toggleLoading(false)
@@ -198,9 +185,7 @@ export default {
             if (item.data.code === 200) {
               npmLineData.push(...item.data.data.result)
             } else {
-              this.isNoData = false
+              this.httpError(res)
-              this.showError = true
-              this.errorMsg = this.errorMsgHandler(res)
             }
           })
           this.showError = false
@@ -212,9 +197,7 @@ export default {
             this.initLineData(npmLineData, val)
           }
         }).catch(e => {
-          this.isNoData = false
+          this.httpError(e)
-          this.showError = true
-          this.errorMsg = this.errorMsgHandler(e)
         }).finally(() => {
           this.toggleLoading(false)
         })
@@ -431,6 +414,11 @@ export default {
         this.tabs = newNpmData
         this.initEchartsOption(this.tabs)
       }
+    },
+    httpError (e) {
+      this.isNoData = false
+      this.showError = true
+      this.errorMsg = this.errorMsgHandler(e)
     }
   },
   mounted () {

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

@@ -70,14 +70,17 @@ export default {
     relatedSessionsData () {
       const conditionStr = this.$route.query.queryCondition ? this.$route.query.queryCondition : ''
       const condition = conditionStr.split(/["|'](.*?)["|']/)
+
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
         ip: condition[1]
       }
+
       const divGreen = document.getElementById('green')
       const divRed = document.getElementById('red')
       const divGray = document.getElementById('gray')
+
       get(api.npm.overview.relatedSessions, params).then(res => {
         if (res.code === 200) {
           this.showError = false
@@ -110,14 +113,10 @@ export default {
             this.changeByErrorOrNodata()
           }
         } else {
-          this.showError = true
+          this.httpError(res)
-          this.errorMsg = this.errorMsgHandler(res)
-          this.changeByErrorOrNodata()
         }
       }).catch(error => {
-        this.showError = true
+        this.httpError(error)
-        this.errorMsg = this.errorMsgHandler(error)
-        this.changeByErrorOrNodata()
       }).finally(() => {
         this.toggleLoading(false)
       })
@@ -133,6 +132,12 @@ export default {
       this.sessionData.serverSessions = '—'
       this.clientSessions = 0
       this.serverSessions = 0
+    },
+    httpError (res) {
+      this.isNoData = false
+      this.showError = true
+      this.errorMsg = this.errorMsgHandler(res)
+      this.changeByErrorOrNodata()
     }
   },
   mounted () {