fix: 增加 dns 头部title， detenctions tab切换列表字段展示调整

src/assets/css/components/views/charts/chartSingleValue.scss

@@ -351,13 +351,24 @@
     width: 100%;
     .single-value__content {
       display: flex;
-      justify-content: center;
+      flex-direction: column;
       width: 100%;
       height: 100%;
+      .single-value__data {
+        display: flex;
+        flex-direction: column;
+        padding: 10px 20px 10px 18px;
+
+        .content__title {
+          font-size: 16px;
+          color: #333333;
+        }
+      }
       .content__data {
         width: 90%;
         height: 100%;
         display: flex;
+        margin: auto;
         flex-direction: column;
         justify-content: center;
       }

src/views/charts/charts/ChartSingleValue.vue

@@ -188,29 +188,36 @@
       </div>
     </div>
     <div class="single-value__content" v-if="isDetectionsProtocol(type)">
-        <div class="content__data">
-          <div class="content__data-protocol">
-            <div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[0]}">
-              <i :class="chartInfo.params.icon[0]" :style="{color: chartInfo.params.iconColor[0]}"></i>
-            </div>
-            <div class="content__data-protocol-value">
-              <div class="content__data-protocol-value-title">{{$t('protocol.requestVolume')}}</div>
-              <div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'bytes'), chartInfo.params.unitType).join(' ')}}</div>
-            </div>
-            <div class="content__data-protocol-percent">占比&nbsp;&nbsp;<span>{{unitConvert($_.get(chartData, 'bytesPercent') * 100, unitTypes.percent).join(' ') }}</span><span>%</span></div>
-          </div>
-          <div class="content__data-protocol">
-            <div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[1]}">
-              <i :class="chartInfo.params.icon[1]" :style="{color: chartInfo.params.iconColor[1]}"></i>
-            </div>
-            <div class="content__data-protocol-value">
-              <div class="content__data-protocol-value-title">{{$t('protocol.totalFlow')}}</div>
-              <div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'count'), chartInfo.params.unitType).join(' ')}}</div>
-            </div>
-            <div class="content__data-protocol-percent">占比&nbsp;&nbsp;<span>{{ unitConvert($_.get(chartData, 'countPercent') * 100, unitTypes.percent).join(' ') }}</span><span>%</span></div>
-          </div>
+      <div class="single-value__data">
+        <div class="content__title">
+          <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">
+            {{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name }}
+          </span>
         </div>
       </div>
+      <div class="content__data">
+        <div class="content__data-protocol">
+          <div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[0]}">
+            <i :class="chartInfo.params.icon[0]" :style="{color: chartInfo.params.iconColor[0]}"></i>
+          </div>
+          <div class="content__data-protocol-value">
+            <div class="content__data-protocol-value-title">{{$t('protocol.requestVolume')}}</div>
+            <div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'bytes'), chartInfo.params.unitType).join(' ')}}</div>
+          </div>
+          <div class="content__data-protocol-percent">占比&nbsp;&nbsp;<span>{{unitConvert($_.get(chartData, 'bytesPercent') * 100, unitTypes.percent).join(' ') }}</span><span>%</span></div>
+        </div>
+        <div class="content__data-protocol">
+          <div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[1]}">
+            <i :class="chartInfo.params.icon[1]" :style="{color: chartInfo.params.iconColor[1]}"></i>
+          </div>
+          <div class="content__data-protocol-value">
+            <div class="content__data-protocol-value-title">{{$t('protocol.totalFlow')}}</div>
+            <div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'count'), chartInfo.params.unitType).join(' ')}}</div>
+          </div>
+          <div class="content__data-protocol-percent">占比&nbsp;&nbsp;<span>{{ unitConvert($_.get(chartData, 'countPercent') * 100, unitTypes.percent).join(' ') }}</span><span>%</span></div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 

src/views/charts/charts/chartDetectionService.vue

@@ -6,6 +6,7 @@
           :detection="data"
           :timeFilter="timeFilter"
           :key="index"
+          :service="true"
           :ref="`detectionRow${index}`"
           :index="index"
       ></chart-detections-table>

src/views/charts/charts/chartDetectionsTable.vue

@@ -2,13 +2,18 @@
   <div class="cn-detection__case">
     <div class="cn-detection__case-severity"><i :class="iconClass" class="cn-icon cn-icon-alert-level"></i></div>
     <div class="cn-detection__row">
-      <div class="cn-detection__header">
+      <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">{{detection.domain}}</div>
         <span class="line">-------</span>
         <span class="circle"></span>
         <i class="cn-icon cn-icon-attacked" ></i>{{detection.victimIp || '-'}}
       </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>
+      </div>
       <div class="cn-detection__body">
         <div class="body__basic-info">
           <div class="basic-info">
@@ -22,26 +27,26 @@
               <span>{{$t('detections.eventSeverity')}}&nbsp;:&nbsp;&nbsp;</span>
               <span>{{detection.eventSeverity || '-'}}</span>
             </div>
-            <div class="basic-info__item">
+            <div class="basic-info__item" v-if="security">
               <i class="cn-icon cn-icon-event-type"></i>
               <span>{{$t('detection.list.securityType')}}&nbsp;:&nbsp;&nbsp;</span>
               <span>{{detection.securityType || '-'}}</span>
             </div>
-            <div class="basic-info__item">
+            <div class="basic-info__item" v-else-if="service">
               <i class="cn-icon cn-icon-event-type"></i>
               <span>{{$t('detections.eventType')}}&nbsp;:&nbsp;&nbsp;</span>
               <span>{{detection.eventType || '-'}}</span>
             </div>
-            <div class="basic-info__item">
+            <div class="basic-info__item" v-if="security">
               <i class="cn-icon cn-icon-trojan"></i>
               <span>{{$t('detection.list.malwareName')}}&nbsp;:&nbsp;&nbsp;</span>
               <span>{{detection.malwareName || '-'}}</span>
             </div>
-            <div class="basic-info__item">
-              <i class="cn-icon cn-icon-mining-pool"></i>
-              <span>{{$t('detection.list.cryptominingPool')}}&nbsp;:&nbsp;&nbsp;</span>
-              <span>{{detection.cryptominingPool || '-'}}</span>
-            </div>
+<!--            <div class="basic-info__item" v-if="security">-->
+<!--              <i class="cn-icon cn-icon-mining-pool"></i>-->
+<!--              <span>{{$t('detection.list.cryptominingPool')}}&nbsp;:&nbsp;&nbsp;</span>-->
+<!--              <span>{{detection.cryptominingPool || '-'}}</span>-->
+<!--            </div>-->
             <div class="basic-info__item">
               <i class="cn-icon cn-icon-time2"></i>
               <span>{{$t('detection.list.startTime')}}&nbsp;:&nbsp;&nbsp;</span>
@@ -69,6 +74,8 @@ export default {
     index: Number,
     timeFilter: Object,
     detection: Object,
+    security: Boolean,
+    service: Boolean,
     pageType: String // 安全事件、服务质量
   },
   computed: {