CN-300 feat: 左侧筛选样式实现

src/assets/css/components/index.scss

@@ -20,6 +20,7 @@
 @import './views/entityExplorer/entityList/row';
 @import 'views/entityExplorer/entityList/detail-overview';
 @import './views/detections/detections';
+@import './views/detections/detection-filter';
 @import './views/charts/panel';
 @import 'views/charts/chartIpOpenPortBar';
 @import './views/charts/chartTable';

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

@@ -0,0 +1,66 @@
+.detection-filter-case {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  padding: 10px;
+  margin-right: 10px;
+  background-color: white;
+
+  .detection-filter {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 10px;
+
+    .filter__header {
+      display: flex;
+      flex: 0 0 32px;
+      align-items: center;
+      padding-left: 10px;
+      color: #666;
+      background-color: #F3F7FA;
+      cursor: pointer;
+
+      span {
+        font-size: 14px;
+        padding-left: 6px;
+      }
+      i {
+        font-size: 12px;
+        transition: all linear .1s;
+        transform: rotate(0) translate(0, 2px);
+      }
+      i.arrow-rotate {
+        transform: rotate(90deg) translate(2px, 3px);
+      }
+    }
+    .filter__body {
+      padding: 5px 0 0 15px;
+
+      .el-checkbox-group {
+        display: flex;
+        flex-direction: column;
+
+        .el-checkbox {
+          display: flex;
+          align-items: center;
+          padding: 5px 0;
+
+          .filter__checkbox-label {
+            display: flex;
+            align-items: center;
+
+            .severity-color-block {
+              width: 4px;
+              height: 15px;
+              border-radius: 2px;
+            }
+          }
+
+          &:last-of-type {
+            padding-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}

src/views/detections/DetectionFilter.vue

@@ -1,11 +1,49 @@
 <template>
-  <div class="entity-filter-case" style="background-color: white; height: 1000px;">
+  <div class="detection-filter-case">
+    <template v-for="(filter, index) in filterData" :key="index">
+      <div class="detection-filter">
+        <div class="filter__header" @click="filter.collapse = !filter.collapse">
+          <i class="el-icon-arrow-right" :class="{ 'arrow-rotate': !filter.collapse }"></i>
+          <span>{{filter.title}}</span>
+        </div>
+        <el-collapse-transition>
+          <div class="filter__body" v-show="!filter.collapse">
+            <el-checkbox-group v-model="filter.value">
+              <template v-for="d in filter.data" :key="d.value">
+                <el-checkbox :label="d.value">
+                  <div class="filter__checkbox-label">
+                    <span class="severity-color-block" v-if="filter.column === 'eventSeverity'" :style="`background-color: ${eventSeverityColor[d.value]}`"></span>
+                    <span :style="filter.column === 'eventSeverity' ? 'padding-left: 10px' : ''">{{d.label}}</span>
+                  </div>
+                </el-checkbox>
+              </template>
+            </el-checkbox-group>
+          </div>
+        </el-collapse-transition>
+      </div>
 
+    </template>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'DetectionFilter'
+  name: 'DetectionFilter',
+  props: {
+    filterData: Array,
+    q: String,
+    timeFilter: Object
+  },
+  data () {
+    return {
+      eventSeverityColor: {
+        critical: '#D84C4C',
+        high: '#FE845D',
+        medium: '#FFB65A',
+        low: '#FFD82D',
+        info: '#D1BD50'
+      }
+    }
+  }
 }
 </script>

src/views/detections/DetectionSearch.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="explorer-search">
+  <div class="explorer-search explorer-search--show-list">
     <div class="explorer-search__input-case explorer-search__input-case--question-mark-in-line">
       <div class="explorer-search__input">
         <advanced-search
@@ -28,9 +28,29 @@ export default {
   },
   data () {
     return {
-      columnList: [],
+      columnList: [
-      operatorList: [],
+        {
-      connectionList: []
+          name: 'event_severity',
+          type: 'string',
+          label: 'Event severity'
+        },
+        {
+          name: 'security_type',
+          type: 'string',
+          label: 'Security type'
+        }
+      ],
+      operatorList: ['=', '!=', '>', '<', '>=', '<='/*, 'IN', 'NOT IN', 'LIKE', 'NOT LIKE'*/],
+      connectionList: [
+        {
+          value: 'AND',
+          label: 'AND'
+        },
+        {
+          value: 'OR',
+          label: 'OR'
+        }
+      ]
     }
   },
   methods: {

src/views/detections/Index.vue

@@ -22,6 +22,7 @@
             :time-filter="timeFilter"
             @filter="filter"
         ></detection-filter>
+
         <div class="detection__list">
           <div class="detection__list-statistics"></div>
           <detection-list
@@ -78,7 +79,101 @@ export default {
         total: 0
       },
       q: '',
-      filterData: [],
+      filterData: [
+        {
+          title: this.$t('detections.eventSeverity'),
+          column: 'eventSeverity',
+          collapse: false,
+          value: [], // value之间是or的关系
+          data: [
+            {
+              label: 'Critical',
+              value: 'critical',
+              count: 50
+            },
+            {
+              label: 'High',
+              value: 'high',
+              count: 50
+            },
+            {
+              label: 'Medium',
+              value: 'medium',
+              count: 50
+            },
+            {
+              label: 'Low',
+              value: 'low',
+              count: 50
+            },
+            {
+              label: 'Info',
+              value: 'info',
+              count: 50
+            }
+          ] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
+        },
+        {
+          title: this.$t('detections.securityType'),
+          collapse: false,
+          value: [],
+          data: [
+            {
+              label: 'Command and control',
+              value: 'command and control',
+              count: 50
+            }
+          ] // 从接口动态获取
+        },
+        {
+          title: this.$t('detections.victimIp'),
+          collapse: false,
+          value: [],
+          data: [
+            {
+              label: '1.2.6.8',
+              value: '1.2.6.8',
+              count: 50
+            }
+          ] // 从接口动态获取
+        },
+        {
+          title: this.$t('detections.victimLocation'),
+          collapse: false,
+          value: [],
+          data: [
+            {
+              label: 'China',
+              value: 'china',
+              count: 50
+            }
+          ] // 从接口动态获取
+        },
+        {
+          title: this.$t('detections.offenderIp'),
+          collapse: false,
+          value: [],
+          data: [
+            {
+              label: '1.2.6.8',
+              value: '1.2.6.8',
+              count: 50
+            }
+          ] // 从接口动态获取
+        },
+        {
+          title: this.$t('detections.offenderLocation'),
+          collapse: false,
+          value: [],
+          data: [
+            {
+              label: 'China',
+              value: 'china',
+              count: 50
+            }
+          ] // 从接口动态获取
+        }
+      ],
       listData: [],
       listLoading: false
     }