From 6970b7a41d4c39c3f9a371ee3b00da6f051f8ef7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B4=AA=E6=B4=AA?= <2498601771@qq.com>
Date: Mon, 28 Aug 2023 15:14:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20detection=E8=BF=98=E5=8E=9F=E4=B9=8B?=
 =?UTF-8?q?=E5=89=8D=E7=89=88=E6=9C=AC=EF=BC=8C=E6=B7=BB=E5=8A=A0=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E8=B7=B3=E8=BD=AC=E8=87=B3=E6=96=B0=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/detections/detection-filter.scss    | 202 +++++++++---------
 src/views/detections/Index.vue                |  12 +-
 src/views/detectionsNew/DetectionFilter.vue   |  94 +-------
 3 files changed, 122 insertions(+), 186 deletions(-)

diff --git a/src/assets/css/components/views/detections/detection-filter.scss b/src/assets/css/components/views/detections/detection-filter.scss
index 35e2c3cc..d7c4493e 100644
--- a/src/assets/css/components/views/detections/detection-filter.scss
+++ b/src/assets/css/components/views/detections/detection-filter.scss
@@ -1,100 +1,100 @@
-//.detection-filter-case {
-//  display: flex;
-//  flex-direction: column;
-//  width: 280px;
-//  padding: 10px;
-//  margin-right: 10px;
-//  background-color: white;
-//  overflow: auto;
-//
-//  .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);
-//      }
-//      .new-detection-filter-header-title {
-//        font-size: 14px;
-//        color: #353636;
-//        font-weight: 600;
-//      }
-//      .new-detection-filter-icon {
-//        margin-left: 8px;
-//        margin-bottom: 2px;
-//        font-weight: bold !important;
-//      }
-//    }
-//
-//    .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;
-//          margin-right: 5px;
-//          .el-checkbox__label {
-//            width: 100%;
-//          }
-//
-//          .filter__checkbox-label {
-//            display: flex;
-//            justify-content: space-between;
-//            align-items: center;
-//
-//            .severity-color-block {
-//              width: 4px;
-//              height: 15px;
-//              border-radius: 2px;
-//            }
-//          }
-//
-//          &:last-of-type {
-//            padding-bottom: 0;
-//          }
-//        }
-//      }
-//    }
-//  }
-//  .new-detection-filter-title {
-//    display: flex;
-//    flex: 0 0 32px;
-//    align-items: center;
-//    padding-left: 27px;
-//    background-color: #EFF2F5;
-//    cursor: pointer;
-//    font-size: 14px;
-//    color: #353636;
-//    font-weight: 600;
-//    margin: -10px;
-//    margin-bottom: 10px;
-//  }
-//}
-.detection-filter-title {
+.detection-filter-case {
+  display: flex;
+  flex-direction: column;
+  width: 280px;
+  padding: 10px;
+  margin-right: 10px;
+  background-color: white;
+  overflow: auto;
+
+  .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);
+      }
+      .new-detection-filter-header-title {
+        font-size: 14px;
+        color: #353636;
+        font-weight: 600;
+      }
+      .new-detection-filter-icon {
+        margin-left: 8px;
+        margin-bottom: 2px;
+        font-weight: bold !important;
+      }
+    }
+
+    .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;
+          margin-right: 5px;
+          .el-checkbox__label {
+            width: 100%;
+          }
+
+          .filter__checkbox-label {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+
+            .severity-color-block {
+              width: 4px;
+              height: 15px;
+              border-radius: 2px;
+            }
+          }
+
+          &:last-of-type {
+            padding-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+  .new-detection-filter-title {
+    display: flex;
+    flex: 0 0 32px;
+    align-items: center;
+    padding-left: 27px;
+    background-color: #EFF2F5;
+    cursor: pointer;
+    font-size: 14px;
+    color: #353636;
+    font-weight: 600;
+    margin: -10px;
+    margin-bottom: 10px;
+  }
+}
+.new-detection-filter-title {
   height: 32px;
   line-height: 32px;
   background: #F7F7F7;
@@ -102,10 +102,10 @@
   box-shadow: 0 1px 0 0 rgba(226, 229, 236, 1);
   border-radius: 4px 4px 0 0;
 }
-.detection-filter-content {
+.new-detection-filter-content {
   padding: 20px;
 
-  .filter-content-title {
+  .new-filter-content-title {
     font-family: NotoSansHans-Medium;
     font-size: 14px;
     line-height: 14px;
@@ -113,11 +113,11 @@
     color: #353636;
     font-weight: 500;
   }
-  .filter-content-content {
+  .new-filter-content-content {
     display: flex;
     flex-direction: column;
 
-    .filter-content-checkbox {
+    .new-filter-content-checkbox {
       line-height: 16px;
       margin-bottom: 10px;
       font-family: NotoSansSChineseRegular;
diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue
index f3d3f5e3..c5d76858 100644
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -4,10 +4,10 @@
     <div class="explorer-top-tools explorer-detection-top-tools">
       <div class="explorer-top-tools-title">{{$t('overall.detections')}}</div>
       <div style="display: flex">
-<!--        <div class="explorer-top-tools-block">
+        <div class="explorer-top-tools-block" @click="jumpNewDetetion">
           <i class="cn-icon cn-icon-configure-policies detection-icon-setting"></i>
           <span>{{$t('config.detections.configurePolicies')}}</span>
-        </div>-->
+        </div>
         <DateTimeRange
             class="date-time-range"
             :start-time="timeFilter.startTime"
@@ -727,6 +727,14 @@ export default {
     },
     resize () {
       this.chartInit.forEach(e => { e.value.resize() })
+    },
+    jumpNewDetetion () {
+      this.$router.push({
+        path: '/detectionsNew',
+        query: {
+          t: +new Date()
+        }
+      })
     }
   },
   mounted () {
diff --git a/src/views/detectionsNew/DetectionFilter.vue b/src/views/detectionsNew/DetectionFilter.vue
index 88ec4cfc..971be21d 100644
--- a/src/views/detectionsNew/DetectionFilter.vue
+++ b/src/views/detectionsNew/DetectionFilter.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
-    <div class="detection-filter-title">
+    <div class="new-detection-filter-title">
       {{ $t('detections.filters') }}
     </div>
-    <div class="detection-filter-content">
+    <div class="new-detection-filter-content">
       <div>
-        <div class="filter-content-title">{{ $t('overall.status') }}</div>
-        <div class="filter-content-content">
+        <div class="new-filter-content-title">{{ $t('overall.status') }}</div>
+        <div class="new-filter-content-content">
           <el-checkbox-group v-model="checkStatus" @change="onChangeCategory" style="display: flex;flex-direction: column">
-            <el-checkbox v-for="item in statusList" :key="item.label" class="filter-content-checkbox" :label="item.status">
+            <el-checkbox v-for="item in statusList" :key="item.label" class="new-filter-content-checkbox" :label="item.status">
               <div>{{ item.label }}</div>
             </el-checkbox>
           </el-checkbox-group>
@@ -16,10 +16,10 @@
       </div>
 
       <div>
-        <div class="filter-content-title">{{ $t('overall.category') }}</div>
-        <div class="filter-content-content">
+        <div class="new-filter-content-title">{{ $t('overall.category') }}</div>
+        <div class="new-filter-content-content">
           <el-checkbox-group v-model="checkCategory" @change="onChangeCategory">
-            <el-checkbox v-for="item in categoryList" :key="item.value" class="filter-content-checkbox" :label="item.value">
+            <el-checkbox v-for="item in categoryList" :key="item.value" class="new-filter-content-checkbox" :label="item.value">
               {{ item.label }}
             </el-checkbox>
           </el-checkbox-group>
@@ -27,10 +27,10 @@
       </div>
 
       <div>
-        <div class="filter-content-title">{{ $t('overall.type') }}</div>
-        <div class="filter-content-content">
+        <div class="new-filter-content-title">{{ $t('overall.type') }}</div>
+        <div class="new-filter-content-content">
           <el-checkbox-group v-model="checkType" @change="onChangeCategory" style="display: flex;flex-direction: column">
-            <el-checkbox v-for="item in typeList" :key="item.value" class="filter-content-checkbox" :label="item.value">
+            <el-checkbox v-for="item in typeList" :key="item.value" class="new-filter-content-checkbox" :label="item.value">
               {{ item.label }}
             </el-checkbox>
           </el-checkbox-group>
@@ -141,75 +141,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.detection-filter-title {
-  height: 32px;
-  line-height: 32px;
-  background: #F7F7F7;
-  padding: 0 20px;
-  box-shadow: 0 1px 0 0 rgba(226, 229, 236, 1);
-  border-radius: 4px 4px 0 0;
-}
-.detection-filter-content {
-  padding: 20px;
-
-  .filter-content-title {
-    font-family: NotoSansHans-Medium;
-    font-size: 14px;
-    line-height: 14px;
-    margin-bottom: 10px;
-    color: #353636;
-    font-weight: 500;
-  }
-  .filter-content-content {
-    display: flex;
-    flex-direction: column;
-
-    .filter-content-checkbox {
-      line-height: 16px;
-      margin-bottom: 10px;
-      font-family: NotoSansSChineseRegular;
-      font-size: 14px;
-      color: #353636;
-      font-weight: 400;
-
-      .el-checkbox__inner {
-        width: 16px !important;
-        height: 16px !important;
-        text-align: center !important;
-        line-height: 16px !important;
-      }
-
-      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-        border-color: #38ACD2;
-        background: #38ACD2;
-        border-radius: 2px;
-      }
-      .el-checkbox__input.is-indeterminate .el-checkbox__inner:before {
-        background: #FFFFFF;
-        border-radius: 1px;
-      }
-      .el-checkbox__input.is-checked {
-        .el-checkbox__inner {
-          border-color: #38ACD2;
-          background: #38ACD2;
-          border-radius: 2px;
-        }
-      }
-      .el-checkbox__input.is-focus {
-        .el-checkbox__inner {
-          border-color: #38ACD2;
-        }
-      }
-
-      .el-checkbox__label {
-        font-family: NotoSansSChineseRegular;
-        font-size: 14px;
-        color: #353636;
-        font-weight: 400;
-      }
-    }
-  }
-}
-</style>