From 7894d329db73080bcc8afc0d509e155b7bfead4a Mon Sep 17 00:00:00 2001
From: "@changcode" <changyongqiang@geedgenetworks.com>
Date: Tue, 19 Apr 2022 18:17:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8DDetections=20=3D?=
 =?UTF-8?q?=E3=80=8B=20Security=20events=20=E5=92=8C=20=3D=E3=80=8B=20Perf?=
 =?UTF-8?q?ormance=20events=20=E5=9B=BE=E8=A1=A8=E5=AE=BD=E5=BA=A6?=
 =?UTF-8?q?=E9=94=99=E8=AF=AF=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=AE=9E=E4=BD=93=E6=A3=80=E6=B5=8B=E5=88=97=E8=A1=A8=E5=AD=97?=
 =?UTF-8?q?=E4=BD=93=E9=A2=9C=E8=89=B2=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../charts/charts/chartDetectionsTable.vue    | 36 +++++++++++++++----
 src/views/detections/Index.vue                | 18 ++++++++--
 2 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/views/charts/charts/chartDetectionsTable.vue b/src/views/charts/charts/chartDetectionsTable.vue
index 476f29fa..455a711d 100644
--- a/src/views/charts/charts/chartDetectionsTable.vue
+++ b/src/views/charts/charts/chartDetectionsTable.vue
@@ -3,16 +3,32 @@
     <div class="cn-detection__case-severity"><i :class="iconClass" class="cn-icon cn-icon-alert-level"></i></div>
     <div class="cn-detection__row">
       <div v-if="security" class="cn-detection__header">
-        <span :class="iconClass"><i :class="iconClass" class="cn-icon cn-icon-attacker"></i>{{detection.offenderIp || '-'}}</span>
-        <div :class="iconClass" class="domain cn-detection-domain" v-if="detection.domain">{{detection.domain}}</div>
+        <span>
+          <i :class="{ 'critical': detection.offenderIp === name}" class="cn-icon cn-icon-attacker"></i>
+          <span :class="{ 'critical': detection.offenderIp === name}">{{detection.offenderIp || '-'}}</span>
+        </span>
+        <div :class="{ 'critical': detection.offenderIp === name}" class="domain cn-detection-domain" v-if="detection.domain">{{detection.domain}}</div>
         <span class="line">-------</span>
         <span class="circle"></span>
-        <i class="cn-icon cn-icon-attacked" ></i>{{detection.victimIp || '-'}}
+        <span>
+          <i :class="{ 'critical': detection.victimIp === name}" class="cn-icon cn-icon-attacked" ></i>
+          <soan :class="{ 'critical': detection.victimIp === name}">{{detection.victimIp || '-'}}</soan>
+        </span>
+
       </div>
       <div v-if="service" class="cn-detection__header">
-        <span v-if="detection.entityType === 'app'" :class="iconClass"><i :class="iconClass" class="cn-icon cn-icon-app2"></i>{{detection.appName || '-'}}</span>
-        <span v-else-if="detection.entityType === 'ip'" :class="iconClass"><i :class="iconClass" class="cn-icon cn-icon-ip2"></i>{{detection.serverIp || '-'}}</span>
-        <span v-else-if="detection.entityType === 'domain'" :class="iconClass"><i :class="iconClass" class="cn-icon cn-icon-domain2"></i>{{detection.domain || '-'}}</span>
+        <span v-if="detection.entityType === 'app'">
+          <i :class="{ 'critical': detection.appName === name}" class="cn-icon cn-icon-app2"></i>
+          <span :class="{ 'critical': detection.appName === name}">{{detection.appName || '-'}}</span>
+        </span>
+        <span v-else-if="detection.entityType === 'ip'">
+          <i :class="{ 'critical': detection.serverIp === name}" class="cn-icon cn-icon-ip2"></i>
+          <span :class="{ 'critical': detection.serverIp === name}">{{detection.serverIp || '-'}}</span>
+        </span>
+        <span v-else-if="detection.entityType === 'domain'">
+          <i :class="{ 'critical': detection.domain === name}" class="cn-icon cn-icon-domain2"></i>
+          <span :class="{ 'critical': detection.domain === name}">{{detection.domain || '-'}}</span>
+        </span>
       </div>
       <div class="cn-detection__body">
         <div class="body__basic-info">
@@ -78,6 +94,11 @@ export default {
     service: Boolean,
     pageType: String // 安全事件、服务质量
   },
+  data () {
+    return {
+      name: ''
+    }
+  },
   computed: {
     iconClass () {
       let className
@@ -118,6 +139,9 @@ export default {
       }
     }
   },
+  mounted () {
+    this.name = this.$route.query.name
+  },
   methods: {
     unitConvert,
     getMillisecond
diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue
index be1b5e84..9085395d 100644
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -285,6 +285,9 @@ export default {
           // eventSeverityTrendOption.xAxis.data = dataMap.get('info').map(v => rTime(v[0]))
           eventSeverityTrendOption.xAxis.data = xData
           const detectionChart = echarts.init(chartDom)
+          window.addEventListener('resize', function () {
+            detectionChart.resize()
+          })
           detectionChart.setOption(eventSeverityTrendOption)
           // this.isEventSeverityNoData = false
         } else {
@@ -311,8 +314,8 @@ export default {
           })
           const chartDom = document.getElementById(`eventSeverityPie${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
+          this.echartsResize(detectionChart)
           detectionChart.setOption(eventSeverityOption)
-
           const vm = this
           detectionChart.off('click')
           detectionChart.on('click', e => {
@@ -338,6 +341,7 @@ export default {
           }))
           const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
+          this.echartsResize(detectionChart)
           const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
           securityTypeOption.series[0].data = data.map(d => {
             return { value: d.count, name: d.eventType }
@@ -365,6 +369,7 @@ export default {
           }))
           const chartDom = document.getElementById(`detectionCategoryPer${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
+          this.echartsResize(detectionChart)
           const securityTypeOption = this.$_.cloneDeep(pieForSeverity)
           securityTypeOption.series[0].data = data.map(d => {
             return { value: d.count, name: d.securityType, itemStyle: { color: getAttackColor(d.securityType) } }
@@ -396,6 +401,7 @@ export default {
 
           const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
+          this.echartsResize(detectionChart)
           const offenderIpOption = this.$_.cloneDeep(activeAttackBar)
           data.sort(reverseSortBy('count'))
           data = data.slice(0, 5)
@@ -451,8 +457,8 @@ export default {
         if (!this.$_.isEmpty(data)) {
           const chartDom = document.getElementById(`detectionActiveAttacker${this.pageType}`)
           const detectionChart = echarts.init(chartDom)
+          this.echartsResize(detectionChart)
           const option = this.$_.cloneDeep(activeAttackBar)
-
           data.sort(reverseSortBy('count'))
           data = data.slice(0, 5)
           option.series[0].data = data.map(d => {
@@ -598,6 +604,11 @@ export default {
         const wraps = document.querySelector('#detectionList')
         wraps.scrollTop = 0
       })
+    },
+    echartsResize (detectionChart) {
+      window.addEventListener('resize', function () {
+        detectionChart.resize()
+      })
     }
   },
   mounted () {
@@ -719,6 +730,9 @@ export default {
       }
     }
   },
+  beforeUnmount () {
+    window.removeEventListener('resize', function () {})
+  },
   setup () {
     const { params } = useRoute()
     const pageType = params.typeName