CN-297 feat: detections下拉静态样式

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

@@ -47,3 +47,125 @@
     }
   }
 }
+.overview__row-timeline {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 17px;
+  background-color: #F9F9F9;
+
+  .row-timeline {
+    flex: 0 0 110px;
+    display: flex;
+    flex-direction: column;
+
+    .row-timeline__time-info {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      color: #666666;
+    }
+    .row-timeline__line {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 1px;
+      margin: 5px 0;
+      background-color: #CBD0D5;
+      overflow: visible;
+
+      .line-point-larger {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 12px;
+        width: 12px;
+        border-radius: 50%;
+        background-color: #F9F9F9;
+        border: 1px solid #666;
+
+        .line-point {
+          background-color: #666;
+        }
+      }
+      .line-point {
+        height: 6px;
+        width: 6px;
+        border-radius: 50%;
+        background-color: #A0B5CA;
+      }
+    }
+    .row-timeline__card {
+      padding: 8px 4px 0;
+
+      &>div {
+        display: flex;
+        flex-direction: column;
+        height: 122px;
+        width: 102px;
+        padding: 10px;
+        background-color: #EFF2F5;
+        border-radius: 2px;
+
+        .timeline__severity {
+          display: flex;
+          align-items: center;
+          margin-bottom: 10px;
+
+          &.timeline__severity--critical i {
+            color: #D84C4C;
+          }
+          &.timeline__severity--high i {
+            color: #FE845D;
+          }
+          &.timeline__severity--medium i {
+            color: #FEB65A;
+          }
+          &.timeline__severity--low i {
+            color: #F6C738;
+          }
+          &.timeline__severity--info i {
+            color: #D1BD50;
+          }
+          i {
+            font-size: 16px;
+          }
+          span {
+            padding-left: 5px;
+            font-size: 14px;
+            color: #3976CB;
+          }
+        }
+        .timeline__security-type {
+          font-size: 12px;
+          color: #3976CB;
+          margin-bottom: 10px;
+        }
+        .timeline__start-time {
+          font-size: 12px;
+          color: #666666;
+        }
+      }
+    }
+    .row-timeline__foot {
+      display: flex;
+      flex-direction: column;
+      padding: 2px 0 10px;
+
+      .detection-ip {
+        display: flex;
+        align-items: center;
+        padding-left: 5px;
+        color: #666;
+        font-size: 12px;
+
+        &.detection-ip__current {
+          color: #D84C4C;
+        }
+        i {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}

src/views/detections/DetectionOverview.vue

@@ -107,6 +107,37 @@
         <div class="row__content row__content--link">{{$t('detections.viewAllRelated')}}</div>
       </div>
       <div class="overview__title">{{$t('detections.relatedDetections')}}</div>
+      <div class="overview__row-timeline">
+        <div class="row-timeline" v-for="event in events" :key="event">
+          <div class="row-timeline__time-info" :style="event.startTime === basicInfo.startTime ? 'color: #333;font-weight: bold;' : ''">{{formatT0(event.startTime)}}</div>
+          <div class="row-timeline__line">
+            <div class="line-point-larger" v-if="event.startTime === basicInfo.startTime">
+              <div class="line-point"></div>
+            </div>
+            <div v-else class="line-point"></div>
+          </div>
+          <div class="row-timeline__card">
+            <div>
+              <div class="timeline__severity timeline__severity--high">
+                <i class="cn-icon cn-icon-alert-level"></i>
+                <span>{{event.eventSeverity}}</span>
+              </div>
+              <div class="timeline__security-type">{{event.securityType}}</div>
+              <div class="timeline__start-time">{{dayJs.tz(getMillisecond(event.startTime)).format('YYYY-MM-DD HH:mm:ss')}}</div>
+            </div>
+          </div>
+          <div class="row-timeline__foot">
+            <div class="detection-ip" :class="{'detection-ip__current': [basicInfo.offenderIp, basicInfo.victimIp].indexOf(event.offenderIp) > -1}">
+              <i class="cn-icon cn-icon-attacker"></i>
+              <span>{{event.offenderIp}}</span>
+            </div>
+            <div class="detection-ip" :class="{'detection-ip__current': [basicInfo.offenderIp, basicInfo.victimIp].indexOf(event.victimIp) > -1}">
+              <i class="cn-icon cn-icon-attacked"></i>
+              <span>{{event.victimIp}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -127,12 +158,19 @@ export default {
       reference: 'https://attack.mitre.org'
     }
   },
+  computed: {
+    formatT0 () {
+      return function (startTime) {
+        return startTime === this.basicInfo.startTime ? 'T0' : 'T0-10m'
+      }
+    }
+  },
   methods: {
     getMillisecond,
     query () {
       this.basicInfo = {
         "eventId": 1212,
-        "offenderIp": "2.2.2.2",
+        "offenderIp": "112.2.2.3",
         "offenderLocationCountry": "China",
         "offenderLocationProvince": "Hebei",
         "offenderLocationRegion": "Xingtai",
@@ -170,10 +208,10 @@ export default {
           "startTime": 1645307930
         },
         {
-          "eventSeverity": "high",
+          "eventSeverity": "critical",
           "securityType": "command and control",
           "offenderIp": "2.2.2.2",
-          "victimIp": "2.2.2.3",
+          "victimIp": "112.2.2.3",
           "startTime": 1645317930
         },
         {
@@ -211,20 +249,6 @@ export default {
           "victimIp": "2.2.2.3",
           "startTime": 1645367930
         },
-        {
-          "eventSeverity": "high",
-          "securityType": "command and control",
-          "offenderIp": "2.2.2.2",
-          "victimIp": "2.2.2.3",
-          "startTime": 1645377930
-        },
-        {
-          "eventSeverity": "high",
-          "securityType": "command and control",
-          "offenderIp": "2.2.2.2",
-          "victimIp": "2.2.2.3",
-          "startTime": 1645387930
-        },
         {
           "eventSeverity": "high",
           "securityType": "command and control",