From 40d43acb6caee9c7932734e380aee5b0c9632a02 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Sun, 22 Oct 2023 18:29:34 +0800
Subject: [PATCH] =?UTF-8?q?CN-1391=20fix:=20=E4=BF=AE=E5=A4=8D=E4=B8=80?=
 =?UTF-8?q?=E7=B3=BB=E5=88=97bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/detections/detections.scss          |  12 +
 src/utils/date-util.js                        |   2 +-
 src/views/detections/DetectionFilter.vue      |   3 +-
 src/views/detections/DetectionList.vue        |   7 +-
 src/views/detections/DetectionRow.vue         |   4 +-
 src/views/detections/DetectionSearch.vue      |  17 +-
 src/views/detections/Index.vue                | 216 +++++++++++-------
 .../detections/options/detectionOptions.js    |  11 +-
 .../DetectionSecurityEventOverview.vue        |  68 +++---
 test/utils/mockData/score.js                  |  62 +++++
 test/utils/tools.test.js                      |  12 +-
 11 files changed, 269 insertions(+), 145 deletions(-)

diff --git a/src/assets/css/components/views/detections/detections.scss b/src/assets/css/components/views/detections/detections.scss
index 9d740400..4d526da3 100644
--- a/src/assets/css/components/views/detections/detections.scss
+++ b/src/assets/css/components/views/detections/detections.scss
@@ -4,6 +4,18 @@
   width: 100%;
   margin-bottom: 10px;
 }
+.detections {
+  .entity__pagination{
+    bottom: 9px;
+    height: 40px;
+    width: 100%;
+  }
+  .detections__container {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 20px;
+  }
+}
 .detection__list {
   display: flex;
   flex-direction: column;
diff --git a/src/utils/date-util.js b/src/utils/date-util.js
index df9a442f..ed0aca8b 100644
--- a/src/utils/date-util.js
+++ b/src/utils/date-util.js
@@ -43,7 +43,7 @@ export function rTime (date) {
 }
 // 日期转换为时间戳
 export function toTime (date) {
-  return new Date(date).getTime()
+  return new Date(parseFloat(date)).getTime()
 }
 // 时间格式转换
 export function dateFormat (date, format = 'YYYY-MM-DD HH:mm:ss') {
diff --git a/src/views/detections/DetectionFilter.vue b/src/views/detections/DetectionFilter.vue
index fe42a2bf..1e11ad41 100644
--- a/src/views/detections/DetectionFilter.vue
+++ b/src/views/detections/DetectionFilter.vue
@@ -1,8 +1,7 @@
 <template>
   <div class="detection-filter-case">
-    <div class="no-data" v-if="isNoData">{{ $t('npm.noData') }}</div>
-
     <div class="new-detection-filter-title">{{$t('detections.filters')}}</div>
+    <div class="no-data" v-if="isNoData">{{ $t('npm.noData') }}</div>
     <template v-for="(filter, index) in filterData" :key="index">
       <div class="detection-filter" v-show="filter.data.length > 0">
         <div class="filter__header" @click="filter.collapse = !filter.collapse">
diff --git a/src/views/detections/DetectionList.vue b/src/views/detections/DetectionList.vue
index 69591dc7..4930ca11 100644
--- a/src/views/detections/DetectionList.vue
+++ b/src/views/detections/DetectionList.vue
@@ -68,13 +68,14 @@ export default {
       this.listData.forEach((item, i) => {
         this.myListData.push(this.$_.cloneDeep(item))
         if (item.eventInfoObj) {
-          axios.get(`${api.detection.securityEvent.detail}/${item.eventInfoObj.ioc_type}/resource=${item.eventInfoObj.ioc_value}`).then(res => {
+          axios.get(`${api.detection.securityEvent.detail}/${item.eventInfoObj.ioc_type}?resource=${item.eventInfoObj.ioc_value}`).then(res => {
             if (res.status === 200) {
-              this.myListData[i].malwareName = res.data.data.malware.malwareName
+              this.myListData[i].malwareName = (this.$_.get(res, 'data.data.malware.malwareName', '-')) || '-'
             } else {
               this.myListData[i].malwareName = '-'
             }
           }).catch(e => {
+            console.error(e)
             this.myListData[i].malwareName = '-'
           })
         }
@@ -107,9 +108,11 @@ export default {
       immediate: true,
       deep: true,
       handler (n) {
+        console.info(n)
         if (!n || n.length === 0) {
           this.timeout = setTimeout(() => {
             this.noData = true
+            this.myListData = []
           }, 500)
         } else {
           clearTimeout(this.timeout)
diff --git a/src/views/detections/DetectionRow.vue b/src/views/detections/DetectionRow.vue
index 3494699a..1e0f4ad5 100644
--- a/src/views/detections/DetectionRow.vue
+++ b/src/views/detections/DetectionRow.vue
@@ -66,9 +66,9 @@
                 <span>{{$t('overall.duration')}}&nbsp;:&nbsp;&nbsp;</span>
                 <span>
                   {{ detection.matchTimes || '-'}} {{ $t('detection.list.times') }} /
-                  {{unitConvert(detection.durationS, 'time', 's', null, 0).join(' ') || '-'}}
+                  {{unitConvert(parseInt(detection.durationS), 'time', 's', null, 0).join(' ') || '-'}}
                 </span>
-                <div v-if="parseInt(detection.status)===0" class="margin-l-10 detection-row-active">Active</div>
+                <div v-if="parseInt(detection.status) === 0" class="margin-l-10 detection-row-active">{{$t('detections.active')}}</div>
               </div>
             </div>
           </div>
diff --git a/src/views/detections/DetectionSearch.vue b/src/views/detections/DetectionSearch.vue
index d3d184db..739a96e1 100644
--- a/src/views/detections/DetectionSearch.vue
+++ b/src/views/detections/DetectionSearch.vue
@@ -21,7 +21,6 @@
 
 <script>
 import AdvancedSearch from '@/components/advancedSearch/Index'
-import { humpToLine } from '@/utils/tools'
 import { schemaDetectionSecurity } from '@/utils/static-data'
 export default {
   name: 'DetectionSearch',
@@ -120,7 +119,7 @@ export default {
       if (params.oldValue.length === 0 && params.newValue.length === 1) {
         // 1.参数值数量从0到1，直接addParams
         const p = {
-          column: humpToLine(params.column),
+          column: params.column,
           operator: '=',
           value: params.newValue
         }
@@ -128,7 +127,7 @@ export default {
       } else if (params.oldValue.length === 1 && params.newValue.length === 0) {
         // 2.参数值数量从1到0，直接removeParams
         const p = {
-          column: humpToLine(params.column),
+          column: params.column,
           operator: '=',
           value: params.oldValue
         }
@@ -136,12 +135,12 @@ export default {
       } else if (params.oldValue.length === 2 && params.newValue.length === 1) {
         // 3.参数值数量从多到1，operator由'in'改为'='
         const oldParam = {
-          column: humpToLine(params.column),
+          column: params.column,
           operator: 'IN',
           value: params.oldValue
         }
         const newParam = {
-          column: humpToLine(params.column),
+          column: params.column,
           operator: '=',
           value: params.newValue
         }
@@ -149,12 +148,12 @@ export default {
       } else if (params.oldValue.length === 1 && params.newValue.length === 2) {
         // 4.参数值数量从1到多, operator由'='改为'in'
         const oldParam = {
-          column: humpToLine(params.column),
+          column: params.column,
           operator: '=',
           value: params.oldValue
         }
         const newParam = {
-          column: humpToLine(params.column),
+          column: params.column,
           operator: 'IN',
           value: params.newValue
         }
@@ -162,12 +161,12 @@ export default {
       } else {
         // 5.参数值数量从多到多，加1或者减1
         const oldParam = {
-          column: humpToLine(params.column),
+          column: params.column,
           operator: 'IN',
           value: params.oldValue
         }
         const newParam = {
-          column: humpToLine(params.column),
+          column: params.column,
           operator: 'IN',
           value: params.newValue
         }
diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue
index d514bb93..d5d76f4d 100644
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="entity-explorer entity-explorer--show-list">
+  <div class="entity-explorer entity-explorer--show-list detections">
     <!-- 顶部工具栏，在列表页显示 -->
     <div class="explorer-top-tools explorer-detection-top-tools">
       <div class="explorer-top-tools-title">{{$t('overall.detections')}}</div>
@@ -33,7 +33,7 @@
         @search="search"
     ></detection-search>
     <!-- 内容区 -->
-    <div class="explorer-container" style="height: calc(100% - 20px);flex-direction: column">
+    <div class="detections__container">
       <loading :loading="loading"></loading>
       <template v-if="isEventSeverityNoData">
          <div class="no-data detection__event-severity-bar" >{{ $t('npm.noData') }}</div>
@@ -121,7 +121,7 @@ import DetectionFilter from '@/views/detections/DetectionFilter'
 import DetectionList from '@/views/detections/DetectionList'
 import Pagination from '@/components/common/Pagination'
 import { defaultPageSize, detectionPageType } from '@/utils/constants'
-import { getNowTime, getSecond, toTime } from '@/utils/date-util'
+import { getNowTime, getSecond, getMillisecond } from '@/utils/date-util'
 import { ref, shallowRef } from 'vue'
 import * as echarts from 'echarts'
 import {
@@ -131,12 +131,13 @@ import {
   multipleBarOption,
   pieForSeverity
 } from '@/views/detections/options/detectionOptions'
-import { api, getData } from '@/utils/api'
+import { api } from '@/utils/api'
 import axios from 'axios'
-import { extensionEchartY, reverseSortBy, switchStatus } from '@/utils/tools'
+import { urlParamsHandler, overwriteUrl, extensionEchartY, reverseSortBy } from '@/utils/tools'
 import { useRoute } from 'vue-router'
 import Loading from '@/components/common/Loading'
 import ChartTabs from '@/components/common/ChartTabs'
+import { useStore } from 'vuex'
 
 export default {
   name: 'Index',
@@ -199,7 +200,7 @@ export default {
           },
           {
             title: this.$t('detections.eventType'),
-            column: 'event_type',
+            column: 'eventType',
             topColumn: 'event_type',
             collapse: false,
             value: [],
@@ -207,7 +208,7 @@ export default {
           },
           {
             title: this.$t('detections.victimIp'),
-            column: 'victim_ip',
+            column: 'victimIP',
             topColumn: 'victim_ip',
             collapse: false,
             value: [],
@@ -232,7 +233,7 @@ export default {
           // },
           {
             title: this.$t('detections.offenderIp'),
-            column: 'offender_ip',
+            column: 'offenderIP',
             topColumn: 'offender_ip',
             collapse: false,
             value: [],
@@ -290,25 +291,40 @@ export default {
   },
   methods: {
     initStatusData (params) {
-      getData(api.detection[this.pageType].statusStatistics, params).then(data => {
-        this.filterData[this.pageType][0].data = data.map(r => ({ label: this.$t(switchStatus(r.status)), value: r.status, count: r.count }))
+      axios.get(api.detection[this.pageType].statusStatistics, { params }).then(res => {
+        if (res.status === 200) {
+          const data = res.data.data.result
+          this.filterData[this.pageType][0].data = data.map(r => {
+            let label = ''
+            if (r.status === '0') {
+              label = this.$t('detections.active')
+            } else if (r.status === '1') {
+              label = this.$t('detections.ended')
+            }
+            return { label, value: r.status, count: r.count }
+          })
+        }
+      }).catch(e => {
+        console.error(e)
+        this.filterData[this.pageType][0].data = []
+        this.errorMsgHandler(e)
       })
     },
     /** 初始化顶部大柱状图 */
     initEventSeverityTrendData (params) {
       this.loading = true
-      // getData(api.detection[this.pageType].eventSeverityTrend, params).then(data => {
-      getData(api.detection[this.pageType].timeDistribution, params).then(data => {
+      axios.get(api.detection[this.pageType].timeDistribution, { params }).then(res => {
+        const data = res.data.data.result
         this.eventSeverityData = data
         if (!this.$_.isEmpty(data)) {
           const dataMap = new Map()
           data.forEach(item => {
             if (item.severity) {
               if (!dataMap.has(item.severity)) {
-                const count = [[toTime(item.statTime), item.count]]
+                const count = [[getMillisecond(parseFloat(item.statTime)), item.count]]
                 dataMap.set(item.severity, count)
               } else {
-                dataMap.get(item.severity).push([toTime(item.statTime), item.count])
+                dataMap.get(item.severity).push([getMillisecond(parseFloat(item.statTime)), item.count])
               }
             }
           })
@@ -347,12 +363,6 @@ export default {
             serie.data = seriesData
           })
 
-          // eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0]))
-
-          eventSeverityTrendOption.xAxis = [{
-            type: 'time',
-            splitNumber: 8
-          }]
           let detectionChart = echarts.getInstanceByDom(chartDom)
           if (detectionChart) {
             echarts.dispose(detectionChart)
@@ -364,8 +374,9 @@ export default {
         } else {
           // this.isEventSeverityNoData = true
         }
-      }).catch(error => {
-        console.log(error)
+      }).catch(e => {
+        console.error(e)
+        this.errorMsgHandler(e)
       }).finally(() => {
         this.$nextTick(() => {
           this.loading = false
@@ -374,8 +385,8 @@ export default {
     },
     /** 初始化左侧事件严重等级和第一个小饼图 */
     initEventSeverityData (params) {
-      // getData(api.detection[this.pageType].eventSeverity, params).then(data => {
-      getData(api.detection[this.pageType].severityStatistics, params).then(data => {
+      axios.get(api.detection[this.pageType].severityStatistics, { params }).then(res => {
+        const data = res.data.data.result
         this.statisticsSeverityData = data
         if (!this.$_.isEmpty(data)) {
           this.filterData[this.pageType][1].data = data.map(r => ({ label: r.severity, value: r.severity, count: r.count }))
@@ -401,12 +412,15 @@ export default {
             }
           })
         }
-      }).catch(error => {
-        console.log(error)
+      }).catch(e => {
+        console.error(e)
+        this.filterData[this.pageType][1].data = []
+        this.errorMsgHandler(e)
       })
     },
     initEventTypeData (params) {
-      getData(api.detection[this.pageType].eventType, params).then(data => {
+      axios.get(api.detection[this.pageType].eventType, { params }).then(res => {
+        const data = res.data.data.result
         this.statisticsCategoryData = data
         if (!this.$_.isEmpty(data)) {
           this.filterData[this.pageType][2].data = data.map(r => ({
@@ -433,14 +447,16 @@ export default {
             vm.filterData.performanceEvent[1].value = vm.triggerFilterDataValue(vm.filterData.performanceEvent[1].value, e.data.name)
           })
         }
-      }).catch(error => {
-        console.log(error)
+      }).catch(e => {
+        console.error(e)
+        this.filterData[this.pageType][2].data = []
+        this.errorMsgHandler(e)
       })
     },
     /** 第二个饼图和左侧filter的eventType */
     initSecurityTypeData (params) {
-      // getData(api.detection[this.pageType].securityType, params).then(data => {
-      getData(api.detection[this.pageType].eventTypeStatistics, params).then(data => {
+      axios.get(api.detection[this.pageType].eventTypeStatistics, { params }).then(res => {
+        const data = res.data.data.result
         this.statisticsCategoryData = data
         if (!this.$_.isEmpty(data)) {
           this.filterData[this.pageType][2].data = data.map(r => ({
@@ -467,14 +483,16 @@ export default {
             vm.filterData.securityEvent[1].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[1].value, e.data.name)
           })
         }
-      }).catch(error => {
-        console.log(error)
+      }).catch(e => {
+        console.error(e)
+        this.filterData[this.pageType][2].data = []
+        this.errorMsgHandler(e)
       })
     },
     /** 横向柱状图和左侧filter的offenderIp */
     initOffenderIpData (params) {
-      // getData(api.detection[this.pageType].offenderIp, params).then(data => {
-      getData(api.detection[this.pageType].offenderIpStatistics, params).then(data => {
+      axios.get(api.detection[this.pageType].offenderIpStatistics, { params }).then(res => {
+        let data = res.data.data.result
         this.statisticsActiveAttackData = data
         if (!this.$_.isEmpty(data)) {
           this.filterData[this.pageType][4].data = data.map(r => ({
@@ -507,44 +525,33 @@ export default {
             vm.filterData.securityEvent[4].value = vm.triggerFilterDataValue(vm.filterData.securityEvent[4].value, e.data[1])
           })
         }
-      }).catch(error => {
-        console.log(error)
+      }).catch(e => {
+        console.error(e)
+        this.filterData[this.pageType][4].data = []
+        this.filterData[this.pageType][4].showMore = false
+        this.filterData[this.pageType][4].showIndex = 9
+        this.errorMsgHandler(e)
       })
     },
 
     initVictimIpData (params) {
-      // getData(api.detection[this.pageType].victimIp, params).then(data => {
-      getData(api.detection[this.pageType].victimIpStatistics, params).then(data => {
+      axios.get(api.detection[this.pageType].victimIpStatistics, { params }).then(res => {
+        const data = res.data.data.result
         this.filterData[this.pageType][3].data = data.map(r => ({ label: r.victimIp, value: r.victimIp, count: r.count }))
         const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][3].data)
         this.filterData[this.pageType][3].showMore = showMore
         this.filterData[this.pageType][3].showIndex = showIndex
-      }).catch(error => {
-        console.log(error)
-      })
-    },
-    initVictimLocationData (params) {
-      getData(api.detection[this.pageType].victimLocation, params).then(data => {
-        this.filterData[this.pageType][3].data = data.map(r => ({ label: r.victimLocationCountry, value: r.victimLocationCountry, count: r.count }))
-        const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][3].data)
-        this.filterData[this.pageType][3].showMore = showMore
-        this.filterData[this.pageType][3].showIndex = showIndex
-      }).catch(error => {
-        console.log(error)
-      })
-    },
-    initOffenderLocationData (params) {
-      getData(api.detection[this.pageType].offenderLocation, params).then(data => {
-        this.filterData[this.pageType][5].data = data.map(r => ({ label: r.offenderLocationCountry, value: r.offenderLocationCountry, count: r.count }))
-        const { showMore, showIndex } = this.computeFilterPage(this.filterData[this.pageType][5].data)
-        this.filterData[this.pageType][5].showMore = showMore
-        this.filterData[this.pageType][5].showIndex = showIndex
-      }).catch(error => {
-        console.log(error)
+      }).catch(e => {
+        console.error(e)
+        this.filterData[this.pageType][3].data = []
+        this.filterData[this.pageType][3].showMore = false
+        this.filterData[this.pageType][3].showIndex = 9
+        this.errorMsgHandler(e)
       })
     },
     initActiveEntity (params) {
-      getData(api.detection[this.pageType].activeEntity, params).then(data => {
+      axios.get(api.detection[this.pageType].activeEntity, { params }).then(res => {
+        let data = res.data.data.result
         this.statisticsActiveAttackData = data
         if (!this.$_.isEmpty(data)) {
           const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
@@ -604,7 +611,7 @@ export default {
           })
         }
       }).catch(error => {
-        console.log(error)
+        console.error(error)
       })
     },
     triggerFilterDataValue (array, value) {
@@ -634,28 +641,39 @@ export default {
       axios.get(api.detection[this.pageType].securityList, { params }).then(response => {
         if (response.status === 200) {
           const data = response.data.data.result
-          data.forEach(item => {
-            item.eventInfoObj = JSON.parse(item.eventInfo)
-          })
-          this.listData = data
+          console.info(data)
+          if (data.length > 0) {
+            data.forEach(item => {
+              item.eventInfoObj = JSON.parse(item.eventInfo)
+              item.startTime = parseFloat(item.startTime)
+            })
+            this.listData = data
+          } else {
+            this.listData = []
+          }
         } else {
           this.listData = []
           console.error(response.data.message)
           this.$message.error(response.data.message)
         }
       })
-      // getData(api.detection[this.pageType].listCount, params).then(data => {
-      getData(api.detection[this.pageType].securityCount, params).then(data => {
-        this.pageObj.total = data
+      axios.get(api.detection[this.pageType].securityCount, { params }).then(data => {
+        this.pageObj.total = parseInt(data)
       }).catch(error => {
-        console.log(error)
+        console.error(error)
       })
     },
     timeRefreshChange () {
-      this.initNoData()
-      if (!this.$refs.dateTimeRange.isCustom) {
-        const value = this.timeFilter.dateRangeValue
-        this.$refs.dateTimeRange.quickChange(value)
+      // 不是自选时间
+      if (this.$refs.dateTimeRange) {
+        if (!this.$refs.dateTimeRange.isCustom) {
+          const value = this.timeFilter.dateRangeValue
+          this.$refs.dateTimeRange.quickChange(value)
+        } else {
+          this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
+        }
+      } else {
+        this.timeFilter = JSON.parse(JSON.stringify(this.timeFilter))
       }
     },
     initNoData () {
@@ -664,9 +682,16 @@ export default {
       this.isStatisticsCategoryNoData = false
       this.isStatisticsActiveAttackNoData = false
     },
-    reload (s, e, v) {
+    reload (startTime, endTime, dateRangeValue) {
       this.initNoData()
-      this.dateTimeRangeChange(s, e, v)
+      this.dateTimeRangeChange(startTime, endTime, dateRangeValue)
+      const { query } = this.$route
+      const newUrl = urlParamsHandler(window.location.href, query, {
+        startTime: this.timeFilter.startTime,
+        endTime: this.timeFilter.endTime,
+        range: dateRangeValue.value
+      })
+      overwriteUrl(newUrl)
     },
     // methods
     dateTimeRangeChange (s, e, v) {
@@ -723,9 +748,7 @@ export default {
       this.initEventSeverityData(params)
       if (this.pageType === detectionPageType.securityEvent) {
         this.initOffenderIpData(params)
-        // this.initOffenderLocationData(params)
         this.initVictimIpData(params)
-        // this.initVictimLocationData(params)
         this.initSecurityTypeData(params)
       } else if (this.pageType === detectionPageType.performanceEvent) {
         // this.initActiveEntity(params)
@@ -902,12 +925,37 @@ export default {
     window.removeEventListener('resize', this.debounceFunc)
   },
   setup () {
-    const { params } = useRoute()
-    const pageType = params.typeName
-    const dateRangeValue = 60
-    const { startTime, endTime } = getNowTime(dateRangeValue)
-    const timeFilter = ref({ startTime, endTime, dateRangeValue })
+    const store = useStore()
+    let { params, query, path } = useRoute()
+    // 获取路由跳转过的历史状态，赋值给当前界面，起到保留状态的作用，如浏览器的回退前进等
+    const routerObj = store.getters.getRouterHistoryList.find(item => item.t === query.t)
+    if (routerObj) {
+      params = routerObj.params
+      query = routerObj.query
+      path = routerObj.path
 
+      // 如果当前界面之前载入过，获取状态后更新地址栏，以便后续的赋值操作
+      const newUrl = urlParamsHandler(window.location.href, useRoute().query, query)
+      overwriteUrl(newUrl)
+    }
+    const pageType = params.typeName
+    // 获取url携带的range、startTime、endTime
+    const rangeParam = query.range
+    const startTimeParam = query.startTime
+    const endTimeParam = query.endTime
+    const dateRangeValue = rangeParam ? parseInt(query.range) : 60
+    const timeFilter = ref({ dateRangeValue })
+    if (!startTimeParam || !endTimeParam) {
+      const { startTime, endTime } = getNowTime(60)
+      timeFilter.value.startTime = getSecond(startTime)
+      timeFilter.value.endTime = getSecond(endTime)
+      // 如果没有时间参数，就将参数写入url
+      const newUrl = urlParamsHandler(window.location.href, useRoute().query, { startTime: timeFilter.value.startTime, endTime: timeFilter.value.endTime, range: dateRangeValue })
+      overwriteUrl(newUrl)
+    } else {
+      timeFilter.value.startTime = parseInt(startTimeParam)
+      timeFilter.value.endTime = parseInt(endTimeParam)
+    }
     return {
       timeFilter,
       pageType
diff --git a/src/views/detections/options/detectionOptions.js b/src/views/detections/options/detectionOptions.js
index ebaaa2c8..8c909b0e 100644
--- a/src/views/detections/options/detectionOptions.js
+++ b/src/views/detections/options/detectionOptions.js
@@ -4,7 +4,7 @@ import {
 } from '@/views/charts/charts/tools'
 import unitConvert from '@/utils/unit-convert'
 import _ from 'lodash'
-import { dateFormatByAppearance } from '@/utils/date-util'
+import { dateFormatByAppearance, xAxisTimeFormatter, xAxisTimeRich } from '@/utils/date-util'
 import { unitTypes } from '@/utils/constants'
 
 const severitySeriesIndexMappings = [
@@ -67,8 +67,8 @@ export const multipleBarOption = {
     source: [
     ]
   },
-  xAxis: {
-    type: 'category',
+  xAxis: [{
+    type: 'time',
     axisTick: { show: false },
     axisLine: {
       show: true,
@@ -77,13 +77,16 @@ export const multipleBarOption = {
       }
     },
     axisLabel: {
+      formatter: xAxisTimeFormatter,
+      rich: xAxisTimeRich,
       color: '#737373',
       interval: 'auto'
     },
+    splitNumber: 8,
     splitLine: {
       show: false
     }
-  },
+  }],
   yAxis: {
     axisTick: { show: false },
     axisLine: {
diff --git a/src/views/detections/overview/DetectionSecurityEventOverview.vue b/src/views/detections/overview/DetectionSecurityEventOverview.vue
index 3962bc1a..aa8a5d7a 100644
--- a/src/views/detections/overview/DetectionSecurityEventOverview.vue
+++ b/src/views/detections/overview/DetectionSecurityEventOverview.vue
@@ -299,48 +299,40 @@ export default {
       // 根据detection的eventInfo对象的ioc_type进行判断，若为domain，malware信息从domain详情中获取，并填充domain信息
       // 若ioc_type为ip，则调用ip接口，填充malware信息
       // 最后调用app，填充app信息。经上获取完整实体详情则最少需要调用4次接口
-      const offenderIPDetail = axios.get(`${api.detection.securityEvent.ipDetail}/resource=${this.detection.offenderIp}`)
-      const victimIPDetail = axios.get(`${api.detection.securityEvent.ipDetail}/resource=${this.detection.victimIp}`)
-      let ipDetail
-      let domainDetail
-      let promiseList = []
-      const appDetail = axios.get(`${api.detection.securityEvent.appDetail}/resource=${this.detection.app}`)
-      if (this.detection.eventInfoObj.ioc_type.toLowerCase() === 'domain') {
-        domainDetail = axios.get(`${api.detection.securityEvent.domainDetail}/resource=${this.detection.eventInfoObj.ioc_value}`)
-        promiseList = [offenderIPDetail, victimIPDetail, domainDetail, appDetail]
-      }
-      if (this.detection.eventInfoObj.ioc_type.toLowerCase() === 'ip') {
-        ipDetail = axios.get(`${api.detection.securityEvent.ipDetail}/resource=${this.detection.eventInfoObj.ioc_value}`)
-        domainDetail = axios.get(`${api.detection.securityEvent.domainDetail}/resource=${this.detection.domain}`)
-        promiseList = [offenderIPDetail, victimIPDetail, domainDetail, appDetail, ipDetail]
-      }
-
-      Promise.all(promiseList).then((responses) => {
-        responses.forEach((res, i) => {
+      if (this.detection.offenderIp) {
+        axios.get(`${api.detection.securityEvent.ipDetail}?resource=${this.detection.offenderIp}`).then(res => {
           if (res.status === 200) {
-            if (i === 0) {
-              this.basicInfo.offenderInfo = res.data.data
+            this.basicInfo.offenderInfo = res.data.data
+            if (this.$_.get(this.detection, 'eventInfoObj.ioc_type', '').toLowerCase() === 'ip') {
+              this.basicInfo.malwareInfo = res.data.data.malware
             }
-            if (i === 1) {
-              this.basicInfo.victimInfo = res.data.data
-            }
-            if (i === 2) {
-              this.basicInfo.domainInfo = res.data.data
-            }
-            if (i === 3) {
-              this.basicInfo.appInfo = res.data.data
-            }
-            if (i === 4) {
-              this.basicInfo.malwareInfo = res.data.data.malwareInfo
-            }
-          } else {
-            console.error(res)
           }
         })
-        if (this.detection.eventInfoObj.ioc_type.toLowerCase() === 'domain') {
-          this.basicInfo.malwareInfo = this.basicInfo.domainInfo.malware || {}
-        }
-      })
+      }
+      if (this.detection.victimIp) {
+        axios.get(`${api.detection.securityEvent.ipDetail}?resource=${this.detection.victimIp}`).then(res => {
+          if (res.status === 200) {
+            this.basicInfo.victimInfo = res.data.data
+          }
+        })
+      }
+      if (this.detection.domain) {
+        axios.get(`${api.detection.securityEvent.domainDetail}?resource=${this.detection.domain}`).then(res => {
+          if (res.status === 200) {
+            this.basicInfo.domainInfo = res.data.data
+            if (this.$_.get(this.detection, 'eventInfoObj.ioc_type', '').toLowerCase() === 'domain') {
+              this.basicInfo.malwareInfo = res.data.data.malware
+            }
+          }
+        })
+      }
+      if (this.detection.app) {
+        axios.get(`${api.detection.securityEvent.appDetail}?resource=${this.detection.app}`).then(res => {
+          if (res.status === 200) {
+            this.basicInfo.appInfo = res.data.data
+          }
+        })
+      }
     },
     queryEvent () {
       axios.get(api.detection.securityEvent.relationEvent, {
diff --git a/test/utils/mockData/score.js b/test/utils/mockData/score.js
index a1eff77c..215a6b95 100644
--- a/test/utils/mockData/score.js
+++ b/test/utils/mockData/score.js
@@ -13,3 +13,65 @@ export const undefinedData = {
   httpResponseLatency: undefined,
   establishLatencyMs: undefined
 }
+
+export const commonData = {
+  tcpLostlenPercent: 0.02,
+  pktRetransPercent: 0.005,
+  sslConLatency: 350,
+  httpResponseLatency: 160,
+  establishLatencyMs: 180
+}
+
+export const commonScoreBase = {
+  establishLatencyMs: {
+    p10: 10,
+    p90: 200
+  },
+  httpResponseLatency: {
+    p10: 20,
+    p90: 200
+  },
+  sslConLatency: {
+    p10: 30,
+    p90: 300
+  },
+  tcpLostlenPercent: {
+    p10: 0.005,
+    p90: 0.05
+  },
+  pktRetransPercent: {
+    p10: 0.01,
+    p90: 0.2
+  }
+}
+
+export const commonData2 = {
+  tcpLostlenPercent: 0.034,
+  pktRetransPercent: 0.145,
+  sslConLatency: 500,
+  httpResponseLatency: 32,
+  establishLatencyMs: 183
+}
+
+export const commonScoreBase2 = {
+  establishLatencyMs: {
+    p10: 90,
+    p90: 250
+  },
+  httpResponseLatency: {
+    p10: 60,
+    p90: 200
+  },
+  sslConLatency: {
+    p10: 300,
+    p90: 800
+  },
+  tcpLostlenPercent: {
+    p10: 0.01,
+    p90: 0.2
+  },
+  pktRetransPercent: {
+    p10: 0.05,
+    p90: 0.3
+  }
+}
diff --git a/test/utils/tools.test.js b/test/utils/tools.test.js
index 552bfe85..cab1a101 100644
--- a/test/utils/tools.test.js
+++ b/test/utils/tools.test.js
@@ -1,11 +1,17 @@
 import { computeScore } from '@/utils/tools'
-import { zeroData, undefinedData } from './mockData/score'
+import { zeroData, undefinedData, commonScoreBase, commonData, commonData2, commonScoreBase2 } from './mockData/score'
 
 describe('computeScore测试', () => {
   test('含0', () => {
-    expect(computeScore(zeroData)).toEqual(6)
+    expect(computeScore(zeroData, commonScoreBase)).toEqual(6)
   })
   test('含undefined', () => {
-    expect(computeScore(undefinedData)).toEqual('-')
+    expect(computeScore(undefinedData, commonScoreBase)).toEqual('-')
+  })
+  test('普通数据', () => {
+    expect(computeScore(commonData, commonScoreBase)).toEqual(4)
+  })
+  test('普通数据2', () => {
+    expect(computeScore(commonData2, commonScoreBase2)).toEqual(4)
   })
 })