CN-296 feat: 左侧筛选和搜索框交互、样式完成；数据未对接完成

src/views/detections/DetectionFilter.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="detection-filter-case">
     <template v-for="(filter, index) in filterData" :key="index">
-      <div class="detection-filter">
+      <div class="detection-filter" v-show="filter.data.length > 0">
         <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>

src/views/detections/DetectionSearch.vue

@@ -7,7 +7,7 @@
             :column-list="columnList"
             :operator-list="operatorList"
             :connection-list="connectionList"
-            :full-text="true"
+            :full-text="false"
             class="advanced-search--show-list"
             @search="search"
         ></advanced-search>
@@ -75,8 +75,8 @@ export default {
     }
   },
   methods: {
-    search () {
-
+    search (metaList, formatSql) {
+      this.$emit('search', metaList, formatSql)
     },
     changeParams (params) { // params: { column: columnName, oldValue: [...], newValue: [...] }
       // 向下传递时需要再转换一次param格式为[{column, operator, value}, ...]
@@ -93,7 +93,7 @@ export default {
         const p = {
           column: humpToLine(params.column),
           operator: '=',
-          value: params.newValue
+          value: params.oldValue
         }
         this.$refs.search.removeParams([p])
       } else if (params.oldValue.length === 2 && params.newValue.length === 1) {
@@ -108,8 +108,8 @@ export default {
           operator: '=',
           value: params.newValue
         }
-        this.$refs.search.changeParams(newParam, oldParam)
-      } else if (params.oldValue.length === 1 && params.newArray.length === 2) {
+        this.$refs.search.changeParams([{ newParam, oldParam }])
+      } else if (params.oldValue.length === 1 && params.newValue.length === 2) {
         // 4.参数值数量从1到多, operator由'='改为'in'
         const oldParam = {
           column: humpToLine(params.column),
@@ -121,7 +121,20 @@ export default {
           operator: 'IN',
           value: params.newValue
         }
-        this.$refs.search.changeParams(newParam, oldParam)
+        this.$refs.search.changeParams([{ newParam, oldParam }])
+      } else {
+        // 5.参数值数量从多到多，加1或者减1
+        const oldParam = {
+          column: humpToLine(params.column),
+          operator: 'IN',
+          value: params.oldValue
+        }
+        const newParam = {
+          column: humpToLine(params.column),
+          operator: 'IN',
+          value: params.newValue
+        }
+        this.$refs.search.changeParams([{ newParam, oldParam }])
       }
     }
   }

src/views/detections/Index.vue

@@ -15,7 +15,7 @@
     <!-- 内容区 -->
     <div class="explorer-container" style="height: calc(100% - 20px); flex-direction: column">
       <div class="detection__event-severity-bar" id="detectionEventSeverityBar"></div>
-        <div style="display: flex;">
+      <div style="display: flex;">
         <detection-filter
             :filter-data="filterData"
             :q="q"
@@ -81,7 +81,7 @@ 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 {getNowTime, getSecond} from '@/utils/date-util'
 import { ref } from 'vue'
 import * as echarts from 'echarts'
 import { multipleBarOption,pieForSeverity,activeAttackBar,getAttackColor,getSeverityColor } from '@/views/detections/options/detectionOptions'
@@ -89,7 +89,6 @@ import ChartEchart from '@/views/charts/charts/ChartEchart'
 import { api } from '@/utils/api'
 import { get } from '@/utils/http'
 
-import { arrayIsEqual } from '@/utils/tools'
 export default {
   name: 'Index',
   components: {
@@ -145,6 +144,7 @@ export default {
         },
         {
           title: this.$t('detections.securityType'),
+          column: 'securityType',
           collapse: false,
           value: [],
           data: [
@@ -157,6 +157,7 @@ export default {
         },
         {
           title: this.$t('detections.victimIp'),
+          column: 'victimIp',
           collapse: false,
           value: [],
           showMore: true,
@@ -271,6 +272,7 @@ export default {
         },
         {
           title: this.$t('detections.victimLocation'),
+          column: 'victimLocation',
           collapse: false,
           value: [],
           showMore: false,
@@ -285,6 +287,7 @@ export default {
         },
         {
           title: this.$t('detections.offenderIp'),
+          column: 'offenderIp',
           collapse: false,
           value: [],
           showMore: false,
@@ -299,6 +302,7 @@ export default {
         },
         {
           title: this.$t('detections.offenderLocation'),
+          column: 'offenderLocation',
           collapse: false,
           value: [],
           showMore: false,
@@ -331,8 +335,9 @@ export default {
       this.eventSeverityOption = this.$_.cloneDeep(multipleBarOption)
 
       const queryParams = {
-        ...this.timeFilter,
-        q:this.q,
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        q: this.q
       }
       get(api.detectionEventSeverity, queryParams).then(response => {
         response = {
@@ -384,10 +389,11 @@ export default {
       this.severityPerOption = this.$_.cloneDeep(pieForSeverity)
 
       const queryParams = {
-        ...this.timeFilter,
-        q:this.q,
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        q: this.q
       }
-      get(api.detectionSeverity, queryParams).then(response => {
+      get(api.detectionEventSeverity, queryParams).then(response => {
         response = {
           "code": 200,
           "success": true,
@@ -415,6 +421,7 @@ export default {
           }
         }
         if (response.code === 200) {
+          this.filterData[0].data = response.data.result.map(r => ({ label: r.eventSeverity, value: r.eventSeverity, count: r.count }))
           this.severityPerData = response.data.result.map(d => {
             return { value: d.count, name: d.eventSeverity,itemStyle:{color:getSeverityColor(d.eventSeverity)}}
           })
@@ -432,8 +439,9 @@ export default {
       this.categoryPerOption = this.$_.cloneDeep(pieForSeverity)
 
       const queryParams = {
-        ...this.timeFilter,
-        q:this.q,
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        q: this.q
       }
       get(api.detectionAttackType, queryParams).then(response => {
         response = {
@@ -484,8 +492,9 @@ export default {
       this.activeAttackOption = this.$_.cloneDeep(activeAttackBar)
 
       const queryParams = {
-        ...this.timeFilter,
-        q:this.q,
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        q: this.q
       }
       get(api.detectionOffenderIp, queryParams).then(response => {
         response = {
@@ -515,6 +524,7 @@ export default {
           }
         }
         if (response.code === 200) {
+          this.filterData[4].data = response.data.result.map(r => ({ label: r.offenderIp, value: r.offenderIp, count: r.count }))
           this.activeAttackData = response.data.result.map(d => {
             return [d.count,d.offenderIp]
           })
@@ -526,6 +536,42 @@ export default {
         })
       })
     },
+    initVictimIp () {
+      const queryParams = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        q: this.q
+      }
+      get(api.detectionVictimIp, queryParams).then(response => {
+        if (response.data && response.data.result) {
+          this.filterData[2].data = response.data.result.map(r => ({ label: r.victimIp, value: r.victimIp, count: r.count }))
+        }
+      })
+    },
+    initVictimLocation () {
+      const queryParams = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        q: this.q
+      }
+      get(api.detectionVictimLocation, queryParams).then(response => {
+        if (response.data && response.data.result) {
+          this.filterData[3].data = response.data.result.map(r => ({ label: r.victimLocationCountry, value: r.victimLocationCountry, count: r.count }))
+        }
+      })
+    },
+    initOffenderLocation () {
+      const queryParams = {
+        startTime: getSecond(this.timeFilter.startTime),
+        endTime: getSecond(this.timeFilter.endTime),
+        q: this.q
+      }
+      get(api.detectionOffenderLocation, queryParams).then(response => {
+        if (response.data && response.data.result) {
+          this.filterData[5].data = response.data.result.map(r => ({ label: r.victimLocationCountry, value: r.victimLocationCountry, count: r.count }))
+        }
+      })
+    },
     initListData(){
       const queryParams = {
         ...this.timeFilter,
@@ -609,7 +655,30 @@ export default {
     dateTimeRangeChange (s, e, v) {
       this.timeFilter = { startTime: s, endTime: e, dateRangeValue: v }
     },
-    search () {
+    search (metaList, formatSql) {
+      if (formatSql) {
+        this.q = formatSql
+        this.metaList = metaList
+      } else {
+        this.q = ''
+        this.metaList = []
+      }
+      this.queryFilter()
+      this.queryList()
+      this.queryListTotal()
+    },
+    queryFilter () {
+      this.initSeverityPerData()
+      this.initCategoryPerData()
+      this.initActiveAttackData()
+      this.initOffenderLocation()
+      this.initVictimIp()
+      this.initVictimLocation()
+    },
+    queryList () {
+
+    },
+    queryListTotal () {
 
     },
     filter (filterColumn) {
@@ -694,19 +763,6 @@ export default {
         this.$refs.search.changeParams({ column: this.filterData[5].column, oldValue: o, newValue: n })
       }
     }
-    /*filterData: {
-      deep: true,
-      handler (n, o) {
-        console.info(n, o)
-        n.forEach((f, i) => {
-          console.info(f.value, o[i].value)
-          console.info(arrayIsEqual(f.value, o[i].value))
-          if (!arrayIsEqual(f.value, o[i].value)) {
-            this.$refs.search.changeParams({ column: f.column, oldValue: o[i].value, newValue: f.value })
-          }
-        })
-      }
-    }*/
   },
   setup () {
     const dateRangeValue = 60