CN-1676 fix: 1、修复左侧filter的key包含多个keyFields时，点击报错的问题；2、详情处理数据添加非空判断。

src/assets/css/common/table-common.scss

@@ -230,6 +230,10 @@
   margin-bottom: 10px;
 }
 
+.margin-l-16 {
+  margin-left: 16px;
+}
+
 .padding-r-20 {
   padding-right: 20px;
 }

src/views/detections/DetectionRow.vue

@@ -11,7 +11,7 @@
     <div class="cn-detection__case">
       <div class="cn-detection__row">
         <div class="cn-detection__header">
-          <span class="detection-event-severity-block" style="margin-left: 16px;">{{ detection.eventName || '-' }}</span>
+          <span class="detection-event-severity-block margin-l-16">{{ detection.eventName || '-' }}</span>
           <div v-for="(item, index) in myDetection.keyList" :key="index">
             <span class="detection-event-name">{{item.key}}</span>
             <span class="detection-event-key">({{ item.type }})</span>
@@ -22,7 +22,7 @@
         <div class="cn-detection__body">
           <div class="body__basic-info">
             <div class="basic-info">
-              <div class="basic-info__item margin-l" style="margin-left: 16px;" v-if="detection.eventType">
+              <div class="basic-info__item margin-l-16" v-if="detection.eventType">
                 <i class="cn-icon cn-icon-event-type"></i>
                 <span>{{$t('detections.eventType')}}&nbsp;:&nbsp;&nbsp;</span>
                 <span>{{detection.eventType || '-'}}</span>

src/views/detections/Index.vue

@@ -701,10 +701,24 @@ export default {
         this.$refs.search.changeParams([params])
       } else if (topColumn === 'keyFields') {
         const nameList = name.split(',')
+
+        // 多个keyField、keyValues时进行拆分匹配
+        const mid = Math.ceil(nameList.length / 2)
+        const fieldsList = nameList.slice(0, mid)
+        const valuesList = nameList.slice(mid)
+
         const columnList = this.filterData[2].topColumn.split(',')
-        nameList.forEach((item, index) => {
+        fieldsList.forEach(item => {
           const params = {
-            column: columnList[index],
+            column: columnList[0],
+            operator: '=',
+            value: item
+          }
+          this.$refs.search.changeParams([params])
+        })
+        valuesList.forEach(item => {
+          const params = {
+            column: columnList[1],
             operator: '=',
             value: item
           }

src/views/detections/overview/detectionDetailMixin.js

@@ -110,29 +110,35 @@ export default {
         if (res.status === 200) {
           // 类型为Threshold时处理折线图
           if (this.detection.ruleType === detectionRuleType.threshold.key) {
-            const seriesData = []
-            res.data.data.result.forEach(item => {
-              seriesData.push([getMillisecond(JSON.parse(item.statTime)), item.recordsNums])
-            })
-            this.lineOption.series[0].data = seriesData
-            this.lineOption.series[0].color = getSeverityNumberColor(res.data.data.result[0].severity) || '#ff9a79'
+            const data = res.data.data.result
+            if (data && data.length > 0) {
+              const seriesData = []
+              data.forEach(item => {
+                seriesData.push([getMillisecond(JSON.parse(item.statTime)), item.recordsNums])
+              })
+              this.lineOption.series[0].data = seriesData
+              this.lineOption.series[0].color = getSeverityNumberColor(res.data.data.result[0].severity) || '#ff9a79'
 
-            this.seriesDataNum = seriesData.length
-            if (this.seriesDataNum <= 1) {
-              this.lineOption.series[0].symbol = 'circle'
-              this.lineOption.series[0].symbolSize = 9
-            } else {
-              this.lineOption.series[0].symbol = 'none'
+              this.seriesDataNum = seriesData.length
+              if (this.seriesDataNum <= 1) {
+                this.lineOption.series[0].symbol = 'circle'
+                this.lineOption.series[0].symbolSize = 9
+              } else {
+                this.lineOption.series[0].symbol = 'none'
+              }
+
+              this.myChart = markRaw(echarts.init(document.getElementById('myChart' + this.detection.eventId)))
+              this.myChart.setOption(this.lineOption)
             }
-
-            this.myChart = markRaw(echarts.init(document.getElementById('myChart' + this.detection.eventId)))
-            this.myChart.setOption(this.lineOption)
           } else {
-            const detailData = res.data.data.result.pop()
-            if (detailData?.eventInfo) {
-              detailData.eventInfoList = JSON.parse(detailData.eventInfo)
+            const data = res.data.data.result
+            if (data && data.length > 0) {
+              const detailData = res.data.data.result.pop()
+              if (detailData?.eventInfo) {
+                detailData.eventInfoList = JSON.parse(detailData.eventInfo)
+              }
+              this.myDetection = { ...detailData, ...this.detection }
             }
-            this.myDetection = { ...detailData, ...this.detection }
           }
         }
       }).catch(e => {
@@ -150,11 +156,14 @@ export default {
       }
       axios.get(api.detection.event.detail, { params }).then(res => {
         if (res.status === 200) {
-          const detailData = res.data.data.result[0]
-          if (detailData.eventInfo) {
-            detailData.eventInfoList = JSON.parse(detailData.eventInfo)
+          const data = res.data.data.result
+          if (data && data.length > 0) {
+            const detailData = data[0]
+            if (detailData.eventInfo) {
+              detailData.eventInfoList = JSON.parse(detailData.eventInfo)
+            }
+            this.myDetection = { ...this.myDetection, ...detailData }
           }
-          this.myDetection = { ...this.myDetection, ...detailData }
         }
       }).catch(e => {
         this.$message.error(this.errorMsgHandler(e))