fix: 优化精简代码

2023-03-24 16:37:12 +08:00
parent 50296a6291
commit 102f99e4f5
13 changed files with 177 additions and 175 deletions
--- a/src/utils/static-data.js
+++ b/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' }
+  ]
+}
--- a/src/utils/tools.js
+++ b/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]}'`
+    }
  }
 }
--- a/src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue
+++ b/src/views/charts2/charts/linkMonitor/LinkTrafficSankey.vue
@@ -109,11 +109,7 @@ export default {
          }
        }
      } else {
-        if (n === 0) {
-          url = api.linkMonitor.quadrupleIngressAnalysis // 入口
-        } else {
-          url = api.linkMonitor.quadrupleEgressAnalysis // 出口
-        }
+        url = n === 0 ? api.linkMonitor.quadrupleIngressAnalysis : 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.dispose()
-      // 避免不能生效
-      this.myChart = null
-    }
-    if (this.myChart2) {
-      this.myChart2.dispose()
-      this.myChart2 = null
-    }
+    this.myChart && this.myChart.dispose()
+    this.myChart2 && this.myChart2.dispose()
    this.chartOption = null

    this.cnLinkInfo = null
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewLine.vue
+++ b/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.errorMsg = this.errorMsgHandler(res)
+          this.httpError(res)
        }
      }).catch(e => {
        console.error(e)
-        this.isNoData = false
-        this.showError = true
-        this.errorMsg = this.errorMsgHandler(e)
+        this.httpError(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 () {
--- a/src/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent.vue
+++ b/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 = 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
-              }
+              t.index = getIndexByEventSeverity(t.eventSeverity)
              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 = false
-            } else {
-              this.chartOption2.legend.show = true
-            }
+            this.chartOption2.legend.show = res.data.data.result.length > 0
            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) {
-      echarts.dispose(dom)
-    }
-    if (dom2) {
-      echarts.dispose(dom2)
-    }
-    this.myChart = null
-    this.myChart2 = null
+    dom && echarts.dispose(dom)
+    dom2 && echarts.dispose(dom2)
  }
 }
 </script>
--- a/src/views/charts2/charts/npm/NpmEventsHeader.vue
+++ b/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: [
-        {
-          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
-        }
-      ],
+      chartData: dataForNpmEventsHeader.chartData,
      type: 'severity',
      showError: false,
      errorMsg: ''
--- a/src/views/charts2/charts/npm/NpmIpMap.vue
+++ b/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'] = find
+                    t[keyPre[i] + 'Score'] = r.data.result.find(d => d.country === t.country)
                  })
                } else {
                  this.showError = true
--- a/src/views/charts2/charts/npm/NpmMap.vue
+++ b/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)
      }
--- a/src/views/charts2/charts/npm/NpmNetworkQuantity.vue
+++ b/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: [
-        { name: 'networkAppPerformance.tcpConnectionEstablishLatency' },
-        { name: 'networkAppPerformance.httpResponse' },
-        { name: 'networkAppPerformance.sslResponseLatency' },
-        { name: 'networkAppPerformance.packetLoss' },
-        { name: 'overall.packetRetrans' }
-      ],
+      npmNetworkName: dataForNpmNetworkQuantity.npmNetworkName,
      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 = `${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.q = getQueryByFlag2(type, condition)
      }
+      params.type = type
+
      // 区分 3 级菜单和 2 级菜单使用不同的 url
-      if (parseFloat(this.tabOperationType) === 3) {
-        url = api.npm.overview.allNetworkAnalysis
-      } else {
-        url = api.npm.overview.networkAnalysis
-      }
-      if ((type && condition) || type) {
+      url = parseFloat(this.tabOperationType) === 3 ? api.npm.overview.allNetworkAnalysis : api.npm.overview.networkAnalysis
+
+      // if ((type && condition) || type) {
+      if (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)
--- a/src/views/charts2/charts/npm/NpmRecentEvents.vue
+++ b/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: [
-        { label: 'network.severity', prop: 'eventSeverity' },
-        { label: 'network.entity', prop: 'eventKey' },
-        { label: 'detections.eventType', prop: 'eventType' }
-      ],
+      customTableTitles: dataForNpmRecentEvents.customTableTitles,
      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 = [
-          { label: 'network.severity', prop: 'eventSeverity' },
-          { label: 'detections.eventType', prop: 'eventType' },
-          { label: 'detection.list.startTime', prop: 'startTime' }
-        ]
+        this.customTableTitles = dataForNpmRecentEvents.customTableTitles1
      } 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.showError = true
-          this.errorMsg = this.errorMsgHandler(res)
+          this.httpError(res)
        }
      }).catch(e => {
-        this.isNoData = false
-        this.showError = true
-        this.errorMsg = this.errorMsgHandler(e)
+        this.httpError(e)
      }).finally(() => {
        this.toggleLoading(false)
      })
@@ -145,11 +136,7 @@ export default {
     */
    splitEventKey (key) {
      let name = ''
-      if (key) {
-        name = key.split(' ')[0]
-      } else {
-        name = '-'
-      }
+      name = key ? key.split(' ')[0] : '-'
      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 () {
--- a/src/views/charts2/charts/npm/NpmTabs.vue
+++ b/src/views/charts2/charts/npm/NpmTabs.vue
@@ -48,11 +48,7 @@ export default {
  emits: ['tabChange'],
  watch: {
    currentTab (n) {
-      const { query } = this.$route
-      const newUrl = urlParamsHandler(window.location.href, query, {
-        tabIndex: n
-      })
-      overwriteUrl(newUrl)
+      this.reloadUrl(n)

      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
-            const newUrl = urlParamsHandler(window.location.href, query, {
-              tabIndex: self.currentTab
-            })
-            overwriteUrl(newUrl)
+            self.reloadUrl(self.currentTab)
+
            setTimeout(() => {
              self.handleActiveBar(self.currentTab)
            }, 400)
@@ -152,11 +145,7 @@ export default {
      }
    },
    handleClick (tab) {
-      const { query } = this.$route
-      const newUrl = urlParamsHandler(window.location.href, query, {
-        tabIndex: tab.index
-      })
-      overwriteUrl(newUrl)
+      this.reloadUrl(tab.index)
    },
    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 () {
--- a/src/views/charts2/charts/npm/NpmTrafficLine.vue
+++ b/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']
-        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]}'`
-        }
+        params.q = getQueryByFlag2(type, condition)
      }

      this.toggleLoading(true)
@@ -174,14 +165,10 @@ export default {
              this.initLineData(res.data.result, val)
            }
          } else {
-            this.isNoData = false
-            this.showError = true
-            this.errorMsg = this.errorMsgHandler(res)
+            this.httpError(res)
          }
        }).catch(e => {
-          this.isNoData = false
-          this.showError = true
-          this.errorMsg = this.errorMsgHandler(e)
+          this.httpError(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.showError = true
-              this.errorMsg = this.errorMsgHandler(res)
+              this.httpError(res)
            }
          })
          this.showError = false
@@ -212,9 +197,7 @@ export default {
            this.initLineData(npmLineData, val)
          }
        }).catch(e => {
-          this.isNoData = false
-          this.showError = true
-          this.errorMsg = this.errorMsgHandler(e)
+          this.httpError(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 () {
--- a/src/views/charts2/charts/npm/RelatedSessions.vue
+++ b/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.errorMsg = this.errorMsgHandler(res)
-          this.changeByErrorOrNodata()
+          this.httpError(res)
        }
      }).catch(error => {
-        this.showError = true
-        this.errorMsg = this.errorMsgHandler(error)
-        this.changeByErrorOrNodata()
+        this.httpError(error)
      }).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 () {