From f9285b8a6f6023d61d200b751acf637603b1995c Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Mon, 14 Feb 2022 22:22:31 +0800
Subject: [PATCH] =?UTF-8?q?CN-299=20feat:=20detection=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/components/index.scss          |   1 +
 .../views/detections/detections.scss          |  19 +++
 src/router/index.js                           |   8 +-
 src/views/detections/DetectionFilter.vue      |  11 ++
 src/views/detections/DetectionList.vue        |  76 +++++++++
 src/views/detections/DetectionOverview.vue    |   9 ++
 src/views/detections/DetectionRow.vue         |  75 +++++++++
 src/views/detections/DetectionSearch.vue      |  42 +++++
 src/views/detections/Index.vue                | 147 +++++++++++++++++-
 src/views/entityExplorer/EntityExplorer.vue   |  11 +-
 src/views/entityExplorer/EntityFilter.vue     |   2 +-
 .../entityExplorer/search/ExplorerSearch.vue  |   2 +-
 12 files changed, 385 insertions(+), 18 deletions(-)
 create mode 100644 src/assets/css/components/views/detections/detections.scss
 create mode 100644 src/views/detections/DetectionFilter.vue
 create mode 100644 src/views/detections/DetectionList.vue
 create mode 100644 src/views/detections/DetectionOverview.vue
 create mode 100644 src/views/detections/DetectionRow.vue
 create mode 100644 src/views/detections/DetectionSearch.vue

diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index 82fa535f..ad16c89a 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -19,6 +19,7 @@
 @import './views/entityExplorer/entityList/card';
 @import './views/entityExplorer/entityList/row';
 @import 'views/entityExplorer/entityList/detail-overview';
+@import './views/detections/detections';
 @import './views/charts/panel';
 @import 'views/charts/chartIpOpenPortBar';
 @import './views/charts/chartTable';
diff --git a/src/assets/css/components/views/detections/detections.scss b/src/assets/css/components/views/detections/detections.scss
new file mode 100644
index 00000000..e536d61a
--- /dev/null
+++ b/src/assets/css/components/views/detections/detections.scss
@@ -0,0 +1,19 @@
+.detection__event-severity-bar {
+  flex: 0 0 175px;
+  background-color: white;
+  width: 100%;
+  margin-bottom: 10px;
+}
+.detection__list {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  .detection__list-statistics {
+    display: flex;
+    flex: 0 0 192px;
+    margin-bottom: 10px;
+    width: 100%;
+    background-color: white;
+  }
+}
diff --git a/src/router/index.js b/src/router/index.js
index 580d0ec9..999a3a18 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -10,10 +10,6 @@ const routes = [
     path: '/entityDetail',
     component: () => import('@/views/entityExplorer/EntityDetail')
   },
-  {
-    path: '/detections',
-    component: () => import('@/views/detections/Index')
-  },
   {
     path: '/',
     component: () => import('@/components/layout/Home'),
@@ -42,6 +38,10 @@ const routes = [
         path: '/entityExplorer',
         component: () => import('@/views/entityExplorer/EntityExplorer')
       },
+      {
+        path: '/detections',
+        component: () => import('@/views/detections/Index')
+      },
       {
         path: '/galaxyProxy',
         component: () => import('@/views/settings/GalaxyProxy')
diff --git a/src/views/detections/DetectionFilter.vue b/src/views/detections/DetectionFilter.vue
new file mode 100644
index 00000000..3703c50f
--- /dev/null
+++ b/src/views/detections/DetectionFilter.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="entity-filter-case" style="background-color: white; height: 1000px;">
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DetectionFilter'
+}
+</script>
diff --git a/src/views/detections/DetectionList.vue b/src/views/detections/DetectionList.vue
new file mode 100644
index 00000000..d10a0f3b
--- /dev/null
+++ b/src/views/detections/DetectionList.vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="entity-list" id="detectionList">
+    <div class="entity__loading" style="background: #eff2f5;opacity: .6;" v-show="loading">
+      <i class="el-icon-loading"></i>
+    </div>
+    <div class="entity-list__content">
+      <div class="entity-list--list">
+        <div class="no-data" v-if="noData">No data</div>
+        <div v-if="!isCollapse" @click="collapse" class="cn-entity__shadow"></div>
+        <detection-row
+            v-for="(data, index) in listData"
+            :detection="data"
+            :timeFilter="timeFilter"
+            :key="index"
+            :ref="`detectionRow${index}`"
+            :index="index"
+            @switchCollapse="switchCollapse"
+        ></detection-row>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DetectionRow from '@/views/detections/DetectionRow'
+export default {
+  name: 'DetectionList',
+  components: {
+    DetectionRow
+  },
+  props: {
+    listData: Array,
+    from: String,
+    pageObj: Object,
+    loading: Boolean,
+    timeFilter: Object
+  },
+  data () {
+    return {
+      showDetail: false,
+      typeName: '',
+      detectionList: [],
+      isCollapse: true,
+      collapseIndex: 0,
+      tableId: 'detectionList',
+      listDataCopy: [],
+      noData: false
+    }
+  },
+  methods: {
+    switchCollapse (isCollapse, index) {
+      this.isCollapse = isCollapse
+      this.collapseIndex = index
+    },
+    collapse () {
+      this.isCollapse = true
+      this.$refs[`detectionRow${this.collapseIndex}`].collapse()
+    }
+  },
+  watch: {
+    listData: {
+      deep: true,
+      handler (n) {
+        if (!n || n.length === 0) {
+          this.timeout = setTimeout(() => {
+            this.noData = true
+          }, 500)
+        } else {
+          clearTimeout(this.timeout)
+          this.noData = false
+        }
+      }
+    }
+  }
+}
+</script>
diff --git a/src/views/detections/DetectionOverview.vue b/src/views/detections/DetectionOverview.vue
new file mode 100644
index 00000000..09125f11
--- /dev/null
+++ b/src/views/detections/DetectionOverview.vue
@@ -0,0 +1,9 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: 'DetectionOverview'
+}
+</script>
diff --git a/src/views/detections/DetectionRow.vue b/src/views/detections/DetectionRow.vue
new file mode 100644
index 00000000..63e2c856
--- /dev/null
+++ b/src/views/detections/DetectionRow.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="cn-entity--list" :style="{zIndex: !isCollapse ? 1 : 'unset'}">
+    <!-- 左侧下拉按钮 -->
+    <div class="cn-entity__collapse">
+      <span @click="switchCollapse" :class="{'reg-down': !isCollapse}"><i class="cn-icon cn-icon-arrow-right"></i></span>
+    </div>
+    <div class="cn-entity__case">
+      <div class="cn-entity__icon"><i class="el-icon-search"></i></div>
+      <div class="cn-entity__row">
+        <div class="cn-entity__header">3.4.5.6</div>
+        <div class="cn-entity__body">
+          <div class="body__basic-info">
+            <div class="basic-info">
+              <div class="basic-info__item">
+                <i class="cn-icon cn-icon-country"></i>
+                <span>{{$t('overall.country')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span>hehe</span>
+              </div>
+              <div class="basic-info__item">
+                <i class="cn-icon cn-icon-position"></i>
+                <span>{{$t('overall.region')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span>xixi</span>
+              </div>
+              <div class="basic-info__item">
+                <i class="cn-icon cn-icon-cloud"></i>
+                <span>{{$t('entities.asn')}}&nbsp;:&nbsp;&nbsp;</span>
+                <span>heihei</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <el-collapse-transition>
+        <div class="cn-entity__detail-overview" v-if="!isCollapse">
+          <el-divider></el-divider>
+          <detection-overview
+              :entity="entityData"
+              :time-filter="timeFilter"
+          ></detection-overview>
+        </div>
+      </el-collapse-transition>
+    </div>
+  </div>
+</template>
+
+<script>
+import DetectionOverview from '@/views/detections/DetectionOverview'
+export default {
+  name: 'DetectionRow',
+  components: {
+    DetectionOverview
+  },
+  props: {
+    index: Number,
+    timeFilter: Object
+  },
+  data () {
+    return {
+      entityData: [],
+      isCollapse: true // 是否是折叠状态
+    }
+  },
+  methods: {
+    /* 切换折叠状态 */
+    switchCollapse () {
+      this.isCollapse = !this.isCollapse
+      this.$emit('switchCollapse', this.isCollapse, this.index)
+    },
+    /* 设为折叠状态 */
+    collapse () {
+      this.isCollapse = true
+    }
+  }
+}
+</script>
diff --git a/src/views/detections/DetectionSearch.vue b/src/views/detections/DetectionSearch.vue
new file mode 100644
index 00000000..47dfffdc
--- /dev/null
+++ b/src/views/detections/DetectionSearch.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="explorer-search">
+    <div class="explorer-search__input-case explorer-search__input-case--question-mark-in-line">
+      <div class="explorer-search__input">
+        <advanced-search
+            ref="search"
+            :column-list="columnList"
+            :operator-list="operatorList"
+            :connection-list="connectionList"
+            :full-text="true"
+            class="advanced-search--show-list"
+            @search="search"
+        ></advanced-search>
+      </div>
+      <div class="search-symbol-inline">
+        <i class="cn-icon cn-icon-help"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import AdvancedSearch from '@/components/advancedSearch/Index'
+export default {
+  name: 'DetectionSearch',
+  components: {
+    AdvancedSearch
+  },
+  data () {
+    return {
+      columnList: [],
+      operatorList: [],
+      connectionList: []
+    }
+  },
+  methods: {
+    search () {
+
+    }
+  }
+}
+</script>
diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue
index cca35d85..f0b6ba52 100644
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -1,13 +1,148 @@
 <template>
-
+  <div
+      class="entity-explorer entity-explorer--show-list"
+  >
+    <!-- 顶部工具栏，在列表页显示 -->
+    <div class="explorer-top-tools">
+      <DateTimeRange class="date-time-range" :start-time="timeFilter.startTime" :end-time="timeFilter.endTime" ref="dateTimeRange" @change="reload"/>
+      <TimeRefresh class="date-time-range" @change="timeRefreshChange" :end-time="timeFilter.endTime"/>
+    </div>
+    <!-- 搜索组件 -->
+    <detection-search
+        ref="search"
+        @search="search"
+    ></detection-search>
+    <!-- 内容区 -->
+    <div class="explorer-container" style="height: calc(100% - 20px); flex-direction: column">
+      <div class="detection__event-severity-bar"></div>
+      <div style="display: flex; height: 100%;">
+        <detection-filter
+            :filter-data="filterData"
+            :q="q"
+            :time-filter="timeFilter"
+            @filter="filter"
+        ></detection-filter>
+        <div class="detection__list">
+          <div class="detection__list-statistics"></div>
+          <detection-list
+              :list-data="listData"
+              :pageObj="pageObj"
+              :time-filter="timeFilter"
+              @pageSize="pageSize"
+              @pageNo="pageNo"
+              :loading="listLoading"
+          ></detection-list>
+        </div>
+      </div>
+      <div class="entity__pagination" style="position: absolute; bottom: 0; width: 100%;">
+        <Pagination
+            ref="pagination"
+            :page-obj="pageObj"
+            @pageNo='pageNo'
+            @pageSize='pageSize'
+            @size-change="pageSize"
+            @prev-click="prev"
+            @next-click="next"
+        >
+        </Pagination>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import DetectionSearch from '@/views/detections/DetectionSearch'
+import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
+import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
+import DetectionFilter from '@/views/detections/DetectionFilter'
+import DetectionList from '@/views/detections/DetectionList'
+import Pagination from '@/components/common/Pagination'
+import { defaultPageSize } from '@/utils/constants'
+import { getNowTime } from '@/utils/date-util'
+import { ref } from 'vue'
 export default {
-  name: 'Index'
+  name: 'Index',
+  components: {
+    DetectionSearch,
+    DateTimeRange,
+    TimeRefresh,
+    DetectionFilter,
+    DetectionList,
+    Pagination
+  },
+  data () {
+    return {
+      pageObj: {
+        pageNo: 1,
+        pageSize: defaultPageSize,
+        total: 0
+      },
+      q: '',
+      filterData: [],
+      listData: [],
+      listLoading: false
+    }
+  },
+  methods: {
+    timeRefreshChange () {
+      if (!this.$refs.dateTimeRange.isCustom) {
+        const value = this.timeFilter.dateRangeValue
+        this.$refs.dateTimeRange.quickChange(value)
+      }
+    },
+    reload (s, e, v) {
+      this.dateTimeRangeChange(s, e, v)
+    },
+    // methods
+    dateTimeRangeChange (s, e, v) {
+      this.timeFilter = { startTime: s, endTime: e, dateRangeValue: v }
+    },
+    search () {
+
+    },
+    filter () {
+
+    },
+    pageSize (val) {
+      this.pageObj.pageSize = val
+      this.search(this.metaList, this.q)
+    },
+    pageNo (val) {
+      this.pageObj.pageNo = val
+      this.search(this.metaList, this.q)
+    },
+    // 点击上一页箭头
+    prev () {
+      this.scrollbarToTop()
+    },
+    // 点击下一页箭头
+    next () {
+      this.scrollbarToTop()
+    },
+    // currentPage 改变时会触发
+    current (val) {
+      this.$emit('pageNo', val)
+      this.scrollbarToTop()
+    },
+    scrollbarToTop () {
+      this.$nextTick(() => {
+        const wraps = document.querySelector('#detectionList')
+        wraps.scrollTop = 0
+      })
+    }
+  },
+  watch: {
+    timeFilter (n) {
+      this.search(this.metaList, this.q)
+    }
+  },
+  setup () {
+    const dateRangeValue = 60
+    const { startTime, endTime } = getNowTime(dateRangeValue)
+    const timeFilter = ref({ startTime, endTime, dateRangeValue })
+    return {
+      timeFilter
+    }
+  }
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/views/entityExplorer/EntityExplorer.vue b/src/views/entityExplorer/EntityExplorer.vue
index ed19c188..f6be8737 100644
--- a/src/views/entityExplorer/EntityExplorer.vue
+++ b/src/views/entityExplorer/EntityExplorer.vue
@@ -38,7 +38,7 @@
         ></entity-list>
       </div>
       <div class="entity__pagination" style="position: absolute; bottom: 0; width: 100%;">
-        <pagination
+        <Pagination
             ref="pagination"
             :page-obj="pageObj"
             @pageNo='pageNo'
@@ -47,7 +47,7 @@
             @prev-click="prev"
             @next-click="next"
         >
-        </pagination>
+        </Pagination>
       </div>
     </div>
     <div class="explorer-foot" v-else>
@@ -121,12 +121,12 @@ import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
 import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
 import EntityFilter from '@/views/entityExplorer/EntityFilter'
 import EntityList from '@/views/entityExplorer/entityList/EntityList'
-import {entityType, entityFilterType, defaultPageSize, riskLevelMapping} from '@/utils/constants'
+import { entityType, entityFilterType, defaultPageSize, riskLevelMapping } from '@/utils/constants'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { ref } from 'vue'
-import pagination from '@/components/common/Pagination'
+import Pagination from '@/components/common/Pagination'
 
 export default {
   name: 'entity-explorer',
@@ -136,7 +136,7 @@ export default {
     TimeRefresh,
     EntityFilter,
     EntityList,
-    pagination: pagination
+    Pagination
   },
   data () {
     return {
@@ -155,7 +155,6 @@ export default {
       entityIpNew: '-',
       entityIpActive: '-',
 
-      showFilter: ['ip', 'app', 'domain'], // ip,domain,app
       pageObj: {
         pageNo: 1,
         pageSize: defaultPageSize,
diff --git a/src/views/entityExplorer/EntityFilter.vue b/src/views/entityExplorer/EntityFilter.vue
index 8ecb7081..8b07f0f5 100644
--- a/src/views/entityExplorer/EntityFilter.vue
+++ b/src/views/entityExplorer/EntityFilter.vue
@@ -1,5 +1,5 @@
 <template >
-  <div class="entity-filter-case " >
+  <div class="entity-filter-case">
     <div class="filter-case__header">{{$t('entities.filter')}}</div>
     <div
         class="entity-filter"
diff --git a/src/views/entityExplorer/search/ExplorerSearch.vue b/src/views/entityExplorer/search/ExplorerSearch.vue
index 1233b2a4..3e424c3a 100644
--- a/src/views/entityExplorer/search/ExplorerSearch.vue
+++ b/src/views/entityExplorer/search/ExplorerSearch.vue
@@ -49,7 +49,7 @@
 import AdvancedSearch from '@/components/advancedSearch/Index'
 import { columnType } from '@/components/advancedSearch/meta/meta'
 import SqlParser from '@/components/advancedSearch/meta/sql-parser'
-import {storageKey} from "@/utils/constants";
+import { storageKey } from '@/utils/constants'
 export default {
   name: 'CnSearch',
   components: {