CN-403 fix: performance详情域名截取二级域名

2022-03-17 17:56:38 +08:00
parent 2000d1645e
commit 4e737f5871
25 changed files with 317 additions and 269 deletions
--- a/src/assets/css/font/iconfont.js
+++ b/src/assets/css/font/iconfont.js
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -49,6 +49,10 @@ const routes = [
      {
        path: '/chart',
        component: () => import('@/views/settings/Chart')
+      },
+      {
+        path: '/temp',
+        component: () => import('@/views/Temp')
      }
    ]
  }
--- a/src/store/modules/panel.js
+++ b/src/store/modules/panel.js
@@ -15,7 +15,7 @@ const panel = {
      x: 0,
      y: 0
    },
-    chartList:[]
+    chartList: []
  },
  mutations: {
    setShowRightBox (state, flag) {
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -461,68 +461,68 @@ export function humpToLine (name) {
  }
  return name.replace(/([A-Z])/g, '_$1').toLowerCase()
 }
-//排序功能:从大到小，降序排列
+// 排序功能:从大到小，降序排列
 export function reverseSortBy (i) {
  return function (a, b) {
    return b[i] - a[i]
  }
 }

-//排序功能:从小到大，升序排列
+// 排序功能:从小到大，升序排列
 export function sortBy (i) {
  return function (a, b) {
    return a[i] - b[i]
  }
 }

-//echart图标，y轴鼠标悬浮时，显示标签所有内容
-export  function extensionEchartY(chart){
-  //判断是否创建过div框,如果创建过就不再创建了
-  //该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
-  let id = document.getElementById("extension")
-  if(!id) {
-    let div = "<div id = 'extension' style=\"display:block\"></div>"
-    let contentDiv = document.createElement("div")
-    contentDiv.setAttribute('id','extension')
-    contentDiv.setAttribute('style','display:block')
+// echart图标，y轴鼠标悬浮时，显示标签所有内容
+export function extensionEchartY (chart) {
+  // 判断是否创建过div框,如果创建过就不再创建了
+  // 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理
+  const id = document.getElementById('extension')
+  if (!id) {
+    const div = "<div id = 'extension' style=\"display:block\"></div>"
+    const contentDiv = document.createElement('div')
+    contentDiv.setAttribute('id', 'extension')
+    contentDiv.setAttribute('style', 'display:block')
    document.documentElement.append(contentDiv)
  }
-  chart.on('mouseover', function(params) {
-    //注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
-    if(params.componentType === "yAxis") {
-      //设置悬浮文本的位置以及样式
-      let extEle = document.getElementById("extension")
-      extEle.style.cssText = "display:inline;position:absolute;" +
-          "    padding: 12px;" +
-          "    max-width: 400px !important;" +
-          "    color: #666;" +
-          "    background-color: rgb(255, 255, 255);" +
-          "    font-size: 14px;" +
-          "    line-height: 20px;" +
-          "    font-weight:400; " +
-          "    font-family: \"Microsoft YaHei\"" +
-          "    border-style: solid;" +
-          "    border-width: 1px;" +
-          "    border-radius: 4px;" +
-          "    border-color: transparent !important;" +
-          "    box-shadow: rgb(0 0 0 / 30%) 0px 0px 3px;" +
-          "    white-space: nowrap;" +
-          "    z-index: 99999999;"
+  chart.on('mouseover', function (params) {
+    // 注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
+    if (params.componentType === 'yAxis') {
+      // 设置悬浮文本的位置以及样式
+      const extEle = document.getElementById('extension')
+      extEle.style.cssText = 'display:inline;position:absolute;' +
+          '    padding: 12px;' +
+          '    max-width: 400px !important;' +
+          '    color: #666;' +
+          '    background-color: rgb(255, 255, 255);' +
+          '    font-size: 14px;' +
+          '    line-height: 20px;' +
+          '    font-weight:400; ' +
+          '    font-family: "Microsoft YaHei"' +
+          '    border-style: solid;' +
+          '    border-width: 1px;' +
+          '    border-radius: 4px;' +
+          '    border-color: transparent !important;' +
+          '    box-shadow: rgb(0 0 0 / 30%) 0px 0px 3px;' +
+          '    white-space: nowrap;' +
+          '    z-index: 99999999;'

-      extEle.innerHTML = params.value;
-      document.documentElement.onmousemove = function(event) {
-        let extEle = document.getElementById("extension")
-        let xx = event.pageX - extEle.offsetWidth - 20
-        let yy = event.pageY + 20
-        extEle.style.cssText = extEle.style.cssText+"top:"+yy+"px;left:"+xx+"px;"
+      extEle.innerHTML = params.value
+      document.documentElement.onmousemove = function (event) {
+        const extEle = document.getElementById('extension')
+        const xx = event.pageX - extEle.offsetWidth - 20
+        const yy = event.pageY + 20
+        extEle.style.cssText = extEle.style.cssText + 'top:' + yy + 'px;left:' + xx + 'px;'
      }
    }
  })
-  chart.on('mouseout', function(params) {
-    //注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
-    if(params.componentType == "yAxis") {
-      let extEle = document.getElementById("extension")
-      extEle.style.cssText = "display:none;"
+  chart.on('mouseout', function (params) {
+    // 注意这里，我是以Y轴显示内容过长为例，如果是x轴的话，需要改为xAxis
+    if (params.componentType == 'yAxis') {
+      const extEle = document.getElementById('extension')
+      extEle.style.cssText = 'display:none;'
    }
  })
 }
--- a/src/views/charts/Chart.vue
+++ b/src/views/charts/Chart.vue
@@ -352,9 +352,9 @@ export default {
    ChartAlarmInfo,
    ChartDomainRecursiveResolve
  },
-  data() {
+  data () {
    return {
-      tabHandleClickType: '',
+      tabHandleClickType: ''
    }
  },
  props: {
@@ -374,7 +374,7 @@ export default {
    tabHandleClickType: String
  },
  computed: {
-    isNoData() {
+    isNoData () {
      return (
        !this.loading &&
        (_.isEmpty(this.chartData) || this.isError) &&
@@ -389,47 +389,47 @@ export default {
        !this.isAlarmInfo
      )
    },
-    chartOption() {
+    chartOption () {
      if (this.customChartOption) {
        return _.cloneDeep(this.customChartOption)
      } else {
        return getOption(this.chartInfo.type)
      }
-    },
+    }
  },
  methods: {
-    resize() {
+    resize () {
      this.$refs['chart' + this.chartInfo.id] &&
        this.$refs['chart' + this.chartInfo.id].resize()
    },
-    showLoading(show) {
+    showLoading (show) {
      this.$emit('showLoading', show)
    },
-    getAlarmInfo(url, extraParams, isRefresh, timeFilter) {
+    getAlarmInfo (url, extraParams, isRefresh, timeFilter) {
      this.$emit('getChartData', url, extraParams, isRefresh, timeFilter)
    },
-    getChartData(url, extraParams) {
+    getChartData (url, extraParams) {
      this.$emit('getChartData', url, extraParams)
    },
-    initEchartsWithTable() {
+    initEchartsWithTable () {
      this.$refs['chart' + this.chartInfo.id] &&
        this.$refs['chart' + this.chartInfo.id].initEchartsWithTable(
-          `chart${this.chartInfo.id}`,
+          `chart${this.chartInfo.id}`
        )
    },
-    query(params) {
+    query (params) {
      this.$emit('query', params)
-    },
+    }
  },
  watch: {
    tabHandleClickType: {
      deep: true,
-      handler(n) {
+      handler (n) {
        this.tabHandleClickType = n
-      },
+      }
    }
  },
-  setup(props) {
+  setup (props) {
    return {
      isEcharts: isEcharts(props.chartInfo.type),
      isEchartsLine: isEchartsLine(props.chartInfo.type),
@@ -442,7 +442,7 @@ export default {
      isSingleValue: isSingleValue(props.chartInfo.type),
      isSingleValueWithEcharts: isSingleValueWithEcharts(props.chartInfo.type),
      isSingleValueWithEchartsTemp: isSingleValueWithEchartsTemp(
-        props.chartInfo.type,
+        props.chartInfo.type
      ),
      isRelationShip: isRelationShip(props.chartInfo.type),
      isTable: isTable(props.chartInfo.type),
--- a/src/views/charts/ChartHeader.vue
+++ b/src/views/charts/ChartHeader.vue
@@ -236,7 +236,7 @@ import {
  isBasicTable,
  isGroup,
  isEchartsWithTable,
-  isAlarmInfo,
+  isAlarmInfo
 } from './charts/tools'
 import ChartError from '@/views/charts/ChartError'
 import { getNowTime } from '@/utils/date-util'
@@ -246,7 +246,7 @@ import {
  chartActiveIpTableOrderOptions,
  chartPieTableTopOptions,
  eventSeverity,
-  chartTableColumnMapping,
+  chartTableColumnMapping
 } from '@/utils/constants'

 export default {
@@ -255,19 +255,19 @@ export default {
    chartInfo: Object,
    errorInfo: {
      type: String,
-      default: '',
+      default: ''
    },
    isError: {
      type: Boolean,
-      default: false,
+      default: false
    },
    table: Object,
-    orderPieTable: Object,
+    orderPieTable: Object
  },
  components: {
-    ChartError,
+    ChartError
  },
-  data() {
+  data () {
    return {
      chartTableColumnMapping,
      dropdownMenuShow: false,
@@ -280,37 +280,37 @@ export default {
        tableData: [
          {
            name: '192.168.20.21',
-            num: 111,
+            num: 111
          },
          {
            name: '192.168.20.22',
-            num: 345,
+            num: 345
          },
          {
            name: '192.168.20.23',
-            num: 111,
+            num: 111
          },
          {
            name: '192.168.20.24',
-            num: 345,
+            num: 345
          },
          {
            name: '192.168.20.25',
-            num: 111,
+            num: 111
          },
          {
            name: '192.168.20.26',
-            num: 345,
-          },
-        ], // table的所有数据
-      },
+            num: 345
+          }
+        ] // table的所有数据
+      }
    }
  },
  methods: {
-    refresh() {
+    refresh () {
      this.$emit('refresh')
    },
-    timeRefreshChange() {
+    timeRefreshChange () {
      // 不是自选时间
      if (!this.$refs.dateTimeRange.isCustom) {
        const value = this.chartTimeFilter.dateRangeValue
@@ -319,26 +319,26 @@ export default {
        this.$emit('refresh', this.chartTimeFilter)
      }
    },
-    reload(s, e, v) {
+    reload (s, e, v) {
      this.dateTimeRangeChange(s, e, v)
    },
-    groupShow() {
+    groupShow () {
      this.$emit('groupShow', this.chartInfo)
    },
-    dateTimeRangeChange(s, e, v) {
+    dateTimeRangeChange (s, e, v) {
      this.chartTimeFilter = { startTime: s, endTime: e, dateRangeValue: v }
      this.$emit('refresh', this.chartTimeFilter)
    },
-    tableLimitChange() {
+    tableLimitChange () {
      this.$emit('tableChange')
    },
-    activeIpTableLimitChange() {
+    activeIpTableLimitChange () {
      this.$emit('tableChange')
    },
-    orderPieTableChange() {
+    orderPieTableChange () {
      this.$emit('orderPieTableChange', this.orderPieTable)
    },
-    tabHandleClick(item) {
+    tabHandleClick (item) {
      this.isFocus = item
      if (item === 'All') {
        this.isFocusAll = true
@@ -346,24 +346,24 @@ export default {
        this.isFocusAll = false
      }
      this.$emit('tabHandleClick', item)
-    },
+    }
  },
  watch: {
    isFocus: {
      deep: true,
-      handler(n) {},
-    },
+      handler (n) {}
+    }
  },
  computed: {
-    showRefreshButton() {
+    showRefreshButton () {
      // 自己是group且父元素是block时，不显示刷新按钮
      // TODO 父元素是block，且只有自己一个子元素时，不显示刷新按钮
      const isGroupAndParentIsBlock =
        this.$_.get(this.chartInfo.parent, 'type') === 95 && this.isGroup
      return !isGroupAndParentIsBlock
-    },
+    }
  },
-  setup(props) {
+  setup (props) {
    const dateRangeValue = 60
    const { startTime, endTime } = getNowTime(dateRangeValue)
    // entity详情内的chart时间工具不是公共的，需要单独定义
@@ -382,8 +382,8 @@ export default {
      isActiveIpTable: isActiveIpTable(props.chartInfo.type),
      isEchartsWithTable: isEchartsWithTable(props.chartInfo.type),
      isGroup: isGroup(props.chartInfo.type),
-      isAlarmInfo: isAlarmInfo(props.chartInfo.type),
+      isAlarmInfo: isAlarmInfo(props.chartInfo.type)
    }
-  },
+  }
 }
 </script>
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -181,10 +181,10 @@ export default {
          this.queryTimeRange = { startTime: getSecond(this.chartTimeFilter.startTime), endTime: getSecond(this.chartTimeFilter.endTime) }
        }
        const chartParams = this.chartInfo.params
-        if(isAlarmInfo && JSON.stringify(extraParams) === '{}'){
+        if (isAlarmInfo && JSON.stringify(extraParams) === '{}') {
          extraParams = {
-            pageNo : 1,
-            pageSize : 9
+            pageNo: 1,
+            pageSize: 9
          }
        }
        // 接口查询参数
@@ -426,7 +426,7 @@ export default {
      isCryptocurrencyEventList: isCryptocurrencyEventList(props.chartInfo.type),
      isAppBasicInfo: isAppBasicInfo(props.chartInfo.type),
      isAppRelatedDomain: isAppRelatedDomain(props.chartInfo.type),
-      isAlarmInfo:isAlarmInfo(props.chartInfo.type)
+      isAlarmInfo: isAlarmInfo(props.chartInfo.type)
    }
  }
 }
--- a/src/views/charts/charts/ChartAlarmInfo.vue
+++ b/src/views/charts/charts/ChartAlarmInfo.vue
@@ -119,16 +119,16 @@ export default {
    chartInfo: Object,
    chartData: [Array, Object],
    tabHandleClickType: String,
-    queryParams: Object,
+    queryParams: Object
  },
-  data() {
+  data () {
    return {
      pageSizeForAlarm: 9,
      eventSeverityColor: eventSeverityColor,
      pageNo: 1,
      alarmInfoCount: {},
      fromChartData: '',
-      isNoData:false
+      isNoData: false
      // result: [
      //   {
      //     entityType: 'ip',
@@ -145,52 +145,52 @@ export default {
    }
  },
  computed: {
-    isNoData() {
+    isNoData () {
      let isNoData = true
      if (!this.$_.isEmpty(this.chartData)) {
        isNoData = false
      }
      return isNoData
-    },
+    }
  },
  watch: {
    tabHandleClickType: {
      deep: true,
-      handler(n) {
+      handler (n) {
        this.$nextTick(() => {
          this.getData(1, n)
        })
-      },
+      }
    },
    alarmInfoCount: {
      deep: true,
-      handler(n) {},
+      handler (n) {}
    },
    queryParams: {
      deep: true,
-      handler(n) {
+      handler (n) {
        if (n.startTime && n.endTime) {
          this.getCount(1)
        }
-      },
-    },
+      }
+    }
  },
  components: {
-    ChartTablePagination,
+    ChartTablePagination
  },
  methods: {
    unitConvert,
    getMillisecond,
-    getCount() {
-      let countQuery = {
+    getCount () {
+      const countQuery = {
        startTime: this.queryParams.startTime,
        endTime: this.queryParams.endTime,
        eventSeverity:
-          this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType,
+          this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType
      }
      this.$nextTick(() => {
        get('/interface/dns/alarmInfoCount', {
-          ...countQuery,
+          ...countQuery
        }).then((response) => {
          if (response.code === 200) {
            this.alarmInfoCount = response.data
@@ -198,7 +198,7 @@ export default {
        })
      })
    },
-    getData(val, n) {
+    getData (val, n) {
      this.pageNo = val
      const extraParams = {
        pageNo: val,
@@ -208,30 +208,30 @@ export default {
            ? ''
            : n
          : this.tabHandleClickType === 'All'
-          ? ''
-          : this.tabHandleClickType,
+            ? ''
+            : this.tabHandleClickType
      }
      const query = {
        startTime: this.queryParams.startTime,
        endTime: this.queryParams.endTime,
        eventSeverity:
-          this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType,
+          this.tabHandleClickType === 'All' ? '' : this.tabHandleClickType
      }
      this.$emit('getAlarmInfo', null, extraParams, false, {
        startTime: query.startTime,
-        endTime: query.endTime,
+        endTime: query.endTime
      })
      get('/interface/dns/alarmInfoCount', {
-        ...query,
+        ...query
      }).then((response) => {
        if (response.code === 200) {
          this.alarmInfoCount = response.data
        }
      })
    },
-    pageJump(val) {
+    pageJump (val) {
      this.getData(val)
-    },
-  },
+    }
+  }
 }
 </script>
--- a/src/views/charts/charts/ChartAppBasicInfo.vue
+++ b/src/views/charts/charts/ChartAppBasicInfo.vue
@@ -4,9 +4,9 @@
      <div style="display: flex; justify-content: space-between; width: 100%;">
        <el-descriptions :column="1" style="padding: 20px 30px;">
          <el-descriptions-item :label="$t('overall.appName') + ':'">{{$_.get(chartData, "name") || '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.appFullName') + ':'">{{$_.get(chartData, "allName") || '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.technology') + ':'">{{$_.get(chartData, "tech") || '-'}}</el-descriptions-item>
-          <el-descriptions-item :label="$t('overall.remark') + ':'">{{$_.get(chartData, "description") || '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.appFullName') + ':'">{{$_.get(chartData, "appLongname") || '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.technology') + ':'">{{$_.get(chartData, "appTechnology") || '-'}}</el-descriptions-item>
+          <el-descriptions-item :label="$t('overall.remark') + ':'">{{$_.get(chartData, "appDescription") || '-'}}</el-descriptions-item>
        </el-descriptions>
        <div class="cn-chart__body-single">
          <div class="cn-chart__body-single-table">
--- a/src/views/charts/charts/ChartEchart.vue
+++ b/src/views/charts/charts/ChartEchart.vue
@@ -37,10 +37,10 @@ export default {
      this.handleYaxis()

      if (this.isEchartsPie) {
-        if(chartParams.size && chartParams.size === 'small'){
+        if (chartParams.size && chartParams.size === 'small') {
          this.chartOption.series[0] = {
            ...this.chartOption.series[0],
-            radius : ['30%', '45%'],
+            radius: ['30%', '45%'],
            label: {
              show: false
            },
@@ -50,18 +50,18 @@ export default {
          }
          this.chartOption.legend = {
            ...this.chartOption.legend,
-            left :'60%',
-            itemGap:5,
-            itemWidth:8,
-            itemHeight:8,
+            left: '60%',
+            itemGap: 5,
+            itemWidth: 8,
+            itemHeight: 8,
            formatter: function (name) {
              return name.length > 9 ? name.substr(0, 9) + '...' : name
-              //return echarts.format.truncateText(name, 6, '…');
+              // return echarts.format.truncateText(name, 6, '…');
            },
            tooltip: {
              show: true
            },
-            textStyle: { //图例文字的样式
+            textStyle: { // 图例文字的样式
              color: '#666666',
              fontSize: 12,
              fontWeight: 400
@@ -71,23 +71,23 @@ export default {
          let otherData = []
          this.chartData.sort(reverseSortBy('num'))

-          if(this.chartData.length>5){
+          if (this.chartData.length > 5) {
            chartDataTmp = this.chartData.slice(0, 5)
-            chartDataTmp.forEach(data=>{
-              if(data.name===''){
+            chartDataTmp.forEach(data => {
+              if (data.name === '') {
                data.name = ' '
              }
            })
            let otherSum = 0
            otherData = this.chartData.slice(5)
-            otherData.forEach(data=>{
-              otherSum = otherSum+data.num
+            otherData.forEach(data => {
+              otherSum = otherSum + data.num
            })
-            chartDataTmp.push({'num':otherSum,'name':'other'})
-          } else if(this.chartData.length<=5){
+            chartDataTmp.push({ num: otherSum, name: 'other' })
+          } else if (this.chartData.length <= 5) {
            chartDataTmp = this.chartData.slice(0, this.chartData.length)
-            chartDataTmp.forEach(data=>{
-              if(data.name===''){
+            chartDataTmp.forEach(data => {
+              if (data.name === '') {
                data.name = ' '
              }
            })
@@ -101,7 +101,7 @@ export default {
              unitType: chartParams.unitType ? chartParams.unitType : 'number'
            }
          })
-        }else {
+        } else {
          this.chartOption.series[0].data = this.chartData.map(d => {
            return {
              name: lineToSpace(d.name),
--- a/src/views/charts/charts/ChartSingleValue.vue
+++ b/src/views/charts/charts/ChartSingleValue.vue
@@ -139,30 +139,30 @@ export default {
  props: {
    chartInfo: Object,
    chartData: [Array, Object],
-    queryParams: Object,
+    queryParams: Object
  },
-  data() {
+  data () {
    return {
      icon: '',
      color: '',
      type: 0,
      chartOption: null,
-      timer: null,
+      timer: null
    }
  },
  watch: {
    chartInfo: {
      deep: true,
      immediate: true,
-      handler(n) {
+      handler (n) {
        this.icon = n.params.icon
        this.color = n.params.color
        this.type = n.type
-      },
-    },
+      }
+    }
  },
  computed: {
-    handleSingleValue() {
+    handleSingleValue () {
      const value =
        this.$_.isEmpty(this.chartData) || this.$_.get(this, 'chartData')
          ? this.chartData
@@ -185,7 +185,7 @@ export default {
      }
      return result
    },
-    singleValueClass() {
+    singleValueClass () {
      return function (type) {
        let c
        switch (type) {
@@ -214,10 +214,10 @@ export default {
        }
        return c
      }
-    },
+    }
  },
  methods: {
-    chartSingleValueTotal() {
+    chartSingleValueTotal () {
      const chartParams = this.$_.get(this.chartInfo, 'params') || {}
      if (this.type === 52) {
        const dom = document.getElementById(`chart${this.chartInfo.id}`)
@@ -234,29 +234,29 @@ export default {
                data: r.values.map((v) => [
                  Number(v[0]) * 1000,
                  Number(v[1]),
-                  chartParams.unitType,
+                  chartParams.unitType
                ]),
                lineStyle: {
-                  color: getChartColor[i],
-                },
+                  color: getChartColor[i]
+                }
              }
            })
            myChart.setOption(this.chartOption)
-          },
+          }
        )
      }
-    },
+    }
  },
-  mounted() {
+  mounted () {
    this.$nextTick(
      () =>
        (this.timer = setTimeout(() => {
          this.chartSingleValueTotal()
-        }, 200)),
+        }, 200))
    )
  },
-  deactivated() {
+  deactivated () {
    clearTimeout(this.timer)
-  },
+  }
 }
 </script>
--- a/src/views/charts/charts/ChartTablePagination.vue
+++ b/src/views/charts/charts/ChartTablePagination.vue
@@ -37,12 +37,12 @@ export default {
      }
    }
  },
-  watch:{
-    pageSizeForAlarm:{
-      deep:true,
+  watch: {
+    pageSizeForAlarm: {
+      deep: true
    },
-    total:{
-      deep:true,
+    total: {
+      deep: true
    }
  },
  methods: {
--- a/src/views/charts/charts/ChartTwoSituationStatistics.vue
+++ b/src/views/charts/charts/ChartTwoSituationStatistics.vue
@@ -35,13 +35,13 @@ export default {
      result: {
        doh: {
          count: 111,
-          percent: 0.85,
+          percent: 0.85
        },
        dot: {
          count: 111,
-          percent: 80.85,
-        },
-      },
+          percent: 80.85
+        }
+      }
    }
  }
 }
--- a/src/views/charts/charts/chart-echart-mixin.js
+++ b/src/views/charts/charts/chart-echart-mixin.js
@@ -84,14 +84,14 @@ export default {
          this.myChart2.setOption(this.chartOption)
          this.$store.commit('setChartList', this.$_.cloneDeep(this.myChart2))
        }
-        let _this = this
-        window.addEventListener("resize", function(){
-          _this.$store.getters.getChartList.forEach(chart =>{
-            if(chart){
+        const _this = this
+        window.addEventListener('resize', function () {
+          _this.$store.getters.getChartList.forEach(chart => {
+            if (chart) {
              chart.resize()
            }
          })
-        });
+        })
      } finally {
        setTimeout(() => {
          this.$emit('showLoading', false)
--- a/src/views/charts/charts/tools.js
+++ b/src/views/charts/charts/tools.js
@@ -223,16 +223,16 @@ export function getLayout (type) {

 export function getGroupHeight (arr) {
  if (arr.length) {
-    let minYArr = [...arr]
+    const minYArr = [...arr]
    minYArr.sort((a, b) => {
      return a.y - b.y
    })
-    let maxYArr = [...arr]
+    const maxYArr = [...arr]
    maxYArr.sort((a, b) => {
      return (b.y + b.h) - (a.y + a.h)
    })
    return maxYArr[0].y + maxYArr[0].h - minYArr[0].y
-    /*let lastItem = []
+    /* let lastItem = []
    let maxY = arr[0].y
    arr.forEach((children, index) => {
      if (maxY === children.y) {
@@ -251,7 +251,7 @@ export function getGroupHeight (arr) {
    if (maxY < 0) {
      maxY = 0
    }
-    return maxHeight + maxY*/
+    return maxHeight + maxY */
  } else {
    return 1
  }
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -112,7 +112,7 @@ import { ref } from 'vue'
 import * as echarts from 'echarts'
 import { multipleBarOption, pieForSeverity, activeAttackBar, getAttackColor, getSeverityColor, getSeriesIndex } from '@/views/detections/options/detectionOptions'
 import { api, getData } from '@/utils/api'
-import { reverseSortBy ,sortBy ,extensionEchartY} from '@/utils/tools'
+import { reverseSortBy, sortBy, extensionEchartY } from '@/utils/tools'
 import { useRoute } from 'vue-router'
 import DetectionNoData from '@/views/detections/DetectionNoData'

@@ -237,7 +237,7 @@ export default {
    initEventSeverityTrendData (params) {
      this.loading = true
      getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => {
-        /*data = [
+        /* data = [
          {
            "statTime": "2022-01-01T10:07:03.008Z",
            "eventSeverity": "critical",
@@ -329,7 +329,7 @@ export default {
            "eventSeverity": "info",
            "count": 27
          },
-        ]*/
+        ] */
        this.eventSeverityData = data
        if (!this.$_.isEmpty(data)) {
          const dataMap = new Map()
@@ -347,36 +347,36 @@ export default {
          const chartDom = document.getElementById(`eventSeverityTrendBar${this.pageType}`)
          const eventSeverityTrendOption = this.$_.cloneDeep(multipleBarOption)

-          let xData = []
+          const xData = []
          dataMap.forEach(function (value, key) {
-            //eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1]))
+            // eventSeverityTrendOption.series[Number(getSeriesIndex(key))].data = value.map(v => Number(v[1]))
            value.forEach(item => {
-              if(xData.indexOf(item[0]) < 0){
+              if (xData.indexOf(item[0]) < 0) {
                xData.push(item[0])
              }
            })
          })
          eventSeverityTrendOption.series.forEach(serie => {
-            let seriesData = []
+            const seriesData = []
            xData.forEach(item => {
-              if(dataMap.has(serie.name)){
-                let hasX = dataMap.get(serie.name).some(function(v) {
+              if (dataMap.has(serie.name)) {
+                const hasX = dataMap.get(serie.name).some(function (v) {
                  if (item == v[0]) {
                    seriesData.push(Number(v[1]))
-                    return true;
+                    return true
                  }
                })
-                if(!hasX){
+                if (!hasX) {
                  seriesData.push(0)
                }
-              }else {
+              } else {
                seriesData.push(0)
              }
            })
            serie.data = seriesData
          })

-          //eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0]))
+          // eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0]))
          eventSeverityTrendOption.xAxis.data = xData
          const detectionChart = echarts.init(chartDom)
          detectionChart.setOption(eventSeverityTrendOption)
@@ -709,7 +709,7 @@ export default {
            return [d.count, d.name]
          }).reverse()
          detectionChart.setOption(option)
-          extensionEchartY(detectionChart)//y轴标签过长时，鼠标悬浮，显示所有内容
+          extensionEchartY(detectionChart)// y轴标签过长时，鼠标悬浮，显示所有内容
        }
      }).catch(error => {
      })
--- a/src/views/detections/options/detectionOptions.js
+++ b/src/views/detections/options/detectionOptions.js
@@ -104,7 +104,7 @@ export const multipleBarOption = {
    {
      name: 'critical',
      type: 'bar',
-      stack:'eventSeverityTrend',
+      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'series'
      },
@@ -117,7 +117,7 @@ export const multipleBarOption = {
    {
      name: 'high',
      type: 'bar',
-      stack:'eventSeverityTrend',
+      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'series'
      },
@@ -130,7 +130,7 @@ export const multipleBarOption = {
    {
      name: 'medium',
      type: 'bar',
-      stack:'eventSeverityTrend',
+      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'series'
      },
@@ -143,7 +143,7 @@ export const multipleBarOption = {
    {
      name: 'low',
      type: 'bar',
-      stack:'eventSeverityTrend',
+      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'series'
      },
@@ -156,7 +156,7 @@ export const multipleBarOption = {
    {
      name: 'info',
      type: 'bar',
-      stack:'eventSeverityTrend',
+      stack: 'eventSeverityTrend',
      emphasis: {
        focus: 'series'
      },
@@ -253,14 +253,14 @@ export const activeAttackBar = {
    axisLine: { show: false },
    axisLabel: {
      show: true,
-      width:95,
-      overflow:'truncate',
+      width: 95,
+      overflow: 'truncate'

    },
    splitLine: {
      show: false
    },
-    triggerEvent: true,
+    triggerEvent: true
  },
  series: [{
    barWidth: 5,
--- a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
@@ -45,7 +45,12 @@
    <div class="overview__right">
      <div class="overview__title">{{$t('detections.goToEntity')}}</div>
      <div class="overview__row">
-        <div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.appName})}}</div>
+        <div class="row__content">
+          <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
+          <span
+              class="row__content--link"
+              @click="goDetail('app', detection.appName)">{{detection.appName}}</span>
+        </div>
      </div>
      <div class="overview__title">{{$t('detections.goToHunt')}}</div>
      <div class="overview__row">
@@ -111,16 +116,16 @@ export default {
        }
      })
    },
-    goDetail(type, name) {
+    goDetail (type, name) {
      const { href } = this.$router.resolve({
        path: '/entityDetail',
        query: {
          entityType: type,
-          name: name,
-        },
+          name: name
+        }
      })
      window.open(href, '_blank')
-    },
+    }
  },
  mounted () {
    this.query()
--- a/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
@@ -49,7 +49,12 @@
    <div class="overview__right">
      <div class="overview__title">{{$t('detections.goToEntity')}}</div>
      <div class="overview__row">
-        <div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.domain})}}</div>
+        <div class="row__content">
+          <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
+          <span
+              class="row__content--link"
+              @click="goDetail('domain', computeSecondaryDomain(detection.domain))">{{computeSecondaryDomain(detection.domain)}}</span>
+        </div>
      </div>
      <div class="overview__title">{{$t('detections.goToHunt')}}</div>
      <div class="overview__row">
@@ -61,7 +66,7 @@

 <script>
 import { api, getData } from '@/utils/api'
-import { eventSeverityColor } from '@/utils/constants'
+import { eventSeverityColor, topDomain } from '@/utils/constants'
 export default {
  name: 'DetectionPerformanceEventDomainOverview',
  props: {
@@ -94,6 +99,32 @@ export default {
        }
        return result || '-'
      }
+    },
+    computeSecondaryDomain () {
+      return function (name) {
+        // 命中的顶级域名
+        let hitTopDomain = ''
+        // 同顶级域名比对
+        const hits = []
+        topDomain.forEach(td => {
+          const hitIndex = name.lastIndexOf(td)
+          if (hitIndex > -1 && hitIndex + td.length === name.length) {
+            hits.push(td)
+          }
+        })
+        if (hits.length > 0) {
+          hits.sort((a, b) => {
+            return b.split('.').length - a.split('.').length
+          })
+          hitTopDomain = hits[0]
+        } else {
+          const arr = name.split('.')
+          hitTopDomain = arr[arr.length - 1]
+        }
+        const index = name.lastIndexOf(hitTopDomain)
+        const preArr = name.substring(0, index).split('.')
+        return [preArr[preArr.length - 2], hitTopDomain].join('.')
+      }
    }
  },
  methods: {
@@ -115,16 +146,16 @@ export default {
        }
      })
    },
-    goDetail(type, name) {
+    goDetail (type, name) {
      const { href } = this.$router.resolve({
        path: '/entityDetail',
        query: {
          entityType: type,
-          name: name,
-        },
+          name: name
+        }
      })
      window.open(href, '_blank')
-    },
+    }
  },
  mounted () {
    this.query()
--- a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
@@ -39,7 +39,12 @@
    <div class="overview__right">
      <div class="overview__title">{{$t('detections.goToEntity')}}</div>
      <div class="overview__row">
-        <div class="row__content row__content--link">{{$t('detections.viewDetailOf', {ip: detection.serverIp})}}</div>
+        <div class="row__content">
+          <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
+          <span
+              class="row__content--link"
+              @click="goDetail('ip', detection.serverIp)">{{detection.serverIp}}</span>
+        </div>
      </div>
      <div class="overview__title">{{$t('detections.goToHunt')}}</div>
      <div class="overview__row">
@@ -103,16 +108,16 @@ export default {
        }
      })
    },
-    goDetail(type, name) {
+    goDetail (type, name) {
      const { href } = this.$router.resolve({
        path: '/entityDetail',
        query: {
          entityType: type,
-          name: name,
-        },
+          name: name
+        }
      })
      window.open(href, '_blank')
-    },
+    }
  },
  mounted () {
    this.query()
--- a/src/views/detections/overview/DetectionSecurityEventOverview.vue
+++ b/src/views/detections/overview/DetectionSecurityEventOverview.vue
@@ -173,9 +173,7 @@
          <span>{{ $t('detections.viewDetailOf') }}</span> &nbsp;
          <span
            class="row__content--link"
-            @click="goDetail('ip', basicInfo.victimIp)"
-            >{{ basicInfo.victimIp }}</span
-          >
+            @click="goDetail('ip', basicInfo.victimIp)"></span>
        </div>
      </div>
      <div class="overview__title">{{ $t('detections.goToOffender') }}</div>
@@ -287,18 +285,18 @@ import _ from 'lodash'
 export default {
  name: 'DetectionOverview',
  props: {
-    detection: Object,
+    detection: Object
  },
-  data() {
+  data () {
    return {
      eventSeverityColor,
      basicInfo: {},
      events: [],
-      reference: 'https://attack.mitre.org',
+      reference: 'https://attack.mitre.org'
    }
  },
  computed: {
-    formatT0() {
+    formatT0 () {
      const vm = this
      return function (event) {
        const diffSeconds = event.diffSeconds
@@ -318,7 +316,7 @@ export default {
            unitTypes.time,
            's',
            null,
-            0,
+            0
          ).join('')
          if (eventStartTime > entityStartTime) {
            return `T0+${suffix}`
@@ -328,26 +326,26 @@ export default {
        }
        return ''
      }
-    },
+    }
  },
  methods: {
    getMillisecond,
-    query() {
+    query () {
      Promise.all([this.queryBasic(), this.queryEvent()]).then((responses) => {
        responses[0] && (this.basicInfo = responses[0])
        responses[1] &&
          (this.events = responses[1].sort(
-            (e1, e2) => e1.startTime - e2.startTime,
+            (e1, e2) => e1.startTime - e2.startTime
          ))
      })
    },
-    queryBasic() {
+    queryBasic () {
      return new Promise((resolve, reject) => {
        try {
          get(api.detection.securityEvent.overviewBasic, {
            eventId: this.detection.eventId,
            startTime: this.detection.startTime,
-            endTime: this.detection.endTime,
+            endTime: this.detection.endTime
          }).then((response) => {
            if (response.code === 200) {
              resolve(response.data.result[0])
@@ -360,13 +358,13 @@ export default {
        }
      })
    },
-    queryEvent() {
+    queryEvent () {
      return new Promise((resolve, reject) => {
        try {
          get(api.detection.securityEvent.overviewEvent, {
            startTime: this.detection.startTime,
            offenderIp: this.detection.offenderIp,
-            victimIp: this.detection.victimIp,
+            victimIp: this.detection.victimIp
          }).then((response) => {
            if (response.code === 200) {
              resolve(response.data.result)
@@ -379,19 +377,19 @@ export default {
        }
      })
    },
-    goDetail(type, name) {
+    goDetail (type, name) {
      const { href } = this.$router.resolve({
        path: '/entityDetail',
        query: {
          entityType: type,
-          name: name,
-        },
+          name: name
+        }
      })
      window.open(href, '_blank')
-    },
+    }
  },
-  mounted() {
+  mounted () {
    this.query()
-  },
+  }
 }
 </script>
--- a/src/views/entityExplorer/entityList/Row.vue
+++ b/src/views/entityExplorer/entityList/Row.vue
@@ -200,21 +200,21 @@ export default {
  name: 'Row',
  props: {
    index: Number,
-    timeFilter: Object,
+    timeFilter: Object
  },
  components: {
-    DetailOverview,
+    DetailOverview
  },
  mixins: [entityListMixin, entityDetailMixin, relatedServer],
-  data() {
+  data () {
    return {
      isCollapse: true, // 是否是折叠状态
      trafficUrl: '',
-      entityType: '',
+      entityType: ''
    }
  },
  computed: {
-    ipLocationRegion() {
+    ipLocationRegion () {
      return function (entityData) {
        const hasProvinceAndCity =
          entityData.ipLocationProvince &&
@@ -237,7 +237,7 @@ export default {
        }
      }
    },
-    entityType() {
+    entityType () {
      let type
      switch (this.entityData.entityType) {
        case 'ip': {
@@ -257,12 +257,12 @@ export default {
      }
      this.entityType = type
      return type
-    },
+    }
  },
  watch: {
    entityData: {
      deep: true,
-      handler(n) {
+      handler (n) {
        if (n.entityType) {
          switch (n.entityType) {
            case 'ip': {
@@ -281,35 +281,35 @@ export default {
              break
          }
        }
-      },
-    },
+      }
+    }
  },
-  setup() {
+  setup () {
    return {
      unitConvert,
-      unitTypes,
+      unitTypes
    }
  },
  methods: {
    /* 切换折叠状态 */
-    switchCollapse() {
+    switchCollapse () {
      this.isCollapse = !this.isCollapse
      this.$emit('switchCollapse', this.isCollapse, this.index)
    },
    /* 设为折叠状态 */
-    collapse() {
+    collapse () {
      this.isCollapse = true
    },
-    getQueryParams() {
+    getQueryParams () {
      const queryParams = {
        startTime: parseInt(this.timeFilter.startTime / 1000),
        endTime: parseInt(this.timeFilter.endTime / 1000),
        appName: this.entityType,
-        domain:this.entityType,
-        ip:this.entityType
+        domain: this.entityType,
+        ip: this.entityType
      }
      return queryParams
-    },
-  },
+    }
+  }
 }
 </script>
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -4,19 +4,23 @@
    <div class="overview__content">
      <div class="overview__row">
        <div class="row__label row__label--width130">APP ID</div>
-        <div class="row__content">{{entityData.appId|| '-'}}</div>
+        <div class="row__content">{{entity.appId|| '-'}}</div>
      </div>
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('entities.category')}}</div>
-        <div class="row__content">{{entityData.appCategory|| '-'}}</div>
+        <div class="row__content">{{entity.appCategory|| '-'}}</div>
      </div>
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('entities.subcategory')}}</div>
-        <div class="row__content">{{entityData.appSubcategory || '-'}}</div>
+        <div class="row__content">{{entity.appSubcategory || '-'}}</div>
      </div>
      <div class="overview__row">
        <div class="row__label row__label--width130">{{$t('entities.riskLevel')}}</div>
-        <div class="row__content">{{appRisk(entityData.appRisk) || '-'}}</div>
+        <div class="row__content">{{appRisk(entity.appRisk) || '-'}}</div>
+      </div>
+      <div class="overview__row">
+        <div class="row__label row__label--width130">{{$t('overall.remark')}}</div>
+        <div class="row__content">{{entity.appDescription || '-'}}</div>
      </div>
    </div>
  </div>
--- a/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
+++ b/src/views/entityExplorer/entityList/detailOverview/entityDetailMixin.js
@@ -72,7 +72,7 @@ export default {
              this.entityData.max = t.aggregation.max
              this.entityData.avg = t.aggregation.avg
            } else if (t.legend === 'bytesSentRate') {
-              this.entityData.bytesSentRate = _.nth(t.values,-3)[1]
+              this.entityData.bytesSentRate = _.nth(t.values, -3)[1]
              this.chartOptionSent = {
                ...this.chartOption,
                series: [
@@ -88,7 +88,7 @@ export default {
                      }
                    },
                    color: '#69b072',
-                    data: _.dropRight(t.values,2).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
+                    data: _.dropRight(t.values, 2).map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
                    showSymbol: false
                  }
                ]