fix: detection聚合模式下threshold详情折线图线条颜色修改，底部色条样式调整

src/assets/css/components/views/detections/detection-overview.scss

@@ -123,7 +123,6 @@ $color-regular: var(--el-text-color-regular);
         .row__mark__line {
           display: flex;
           flex-wrap: wrap;
-          margin-bottom: 12px;
 
           .mark__line__text {
             font-size: 12px;
@@ -131,11 +130,10 @@ $color-regular: var(--el-text-color-regular);
           }
 
           .mark__line__block {
-            width: 20px;
+            width: 12px;
             height: 12px;
-            border-radius: 4px;
             margin-left: 6px;
-            margin-right: 12px;
+            margin-right: 6px;
             cursor: pointer;
           }
         }
@@ -152,11 +150,21 @@ $color-regular: var(--el-text-color-regular);
           width: 550px;
           height: 32px;
           margin: 12px 0 10px 30px;
+          display: flex;
+
+          div {
+            width: 100%;
+            height: 32px;
+          }
         }
       }
 
       .row__display {
         display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 600px;
+        padding-right: 0;
       }
     }
 

src/views/detections/options/detectionOptions.js

@@ -500,7 +500,7 @@ export const lineOption = {
       name: 'match',
       data: [],
       type: 'line',
-      color: '#ff9a79',
+      color: '#2E7AFE',
       symbol: 'none',
       markLine: {
         silent: true,
@@ -519,7 +519,7 @@ export const lineOption = {
     trigger: 'axis',
     formatter: function (params) {
       const param = JSON.parse(JSON.stringify(params[0]))
-      param.marker = param.marker.replace('#ff9a79', param.data[2])
+      param.marker = param.marker.replace('#2E7AFE', param.data[2])
       const str = `<div style="display: flex;justify-content: space-between"><div>${param.marker}${param.seriesName}</div><div>${param.data[1]}</div></div>`
       return `${param.axisValueLabel}<br />${str}`
     },

src/views/detections/overview/ThresholdOverview.vue

@@ -9,17 +9,19 @@
       </div>
       <div class="overview__title">{{ $t('overall.summary') }}</div>
       <div class="overview__row overview__row__display">
-        <div class="row__content1 row__display">
-          <div v-for="(item, index) in markLineData" :key="item.label" class="row__mark__line" @click="highLightMarkLine(index)">
-            <div class="mark__line__text">{{ item.label }}: {{ item.yAxis }}</div>
-            <div class="mark__line__block" :style="{background: item.itemStyle.color}"></div>
-          </div>
-        </div>
         <div class="row__content1">
           <div class="row__content__charts" :id="`myChart${detection.eventId}`"></div>
         </div>
         <div class="row__content1" v-if="seriesDataNum>1">
-          <div class="charts__visual__map" :style="`background: linear-gradient(to right, ${mapColor});`"></div>
+          <div class="charts__visual__map">
+            <div v-for="(item, index) in mapColor" :key="index" :style="`background: ${item};`"></div>
+          </div>
+        </div>
+        <div class="row__content1 row__display">
+          <div v-for="(item, index) in markLineData" :key="item.label" class="row__mark__line" @click="highLightMarkLine(index)">
+            <div class="mark__line__block" :style="{background: item.itemStyle.color}"></div>
+            <div class="mark__line__text">{{ item.label }}</div>
+          </div>
         </div>
       </div>
 

src/views/detections/overview/detectionDetailMixin.js

@@ -24,7 +24,7 @@ export default {
       myChart: null,
       lineOption: lineOption,
       seriesDataNum: 0,
-      mapColor: '',
+      mapColor: [],
       markLineData: []
     }
   },
@@ -106,11 +106,10 @@ export default {
           if (this.detection.ruleType === detectionRuleType.threshold.key) {
             const data = res.data.data.result
             if (data && data.length > 0) {
-              this.mapColor = ''
+              this.mapColor = []
               data.forEach(item => {
-                this.mapColor += getSeverityNumberColor(item.severity) + ','
+                this.mapColor.push(getSeverityNumberColor(item.severity))
               })
-              this.mapColor = this.mapColor.slice(0, -1)
               this.handleLineChart(data)
             }
           } else {