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

src/components/advancedSearch/Index.vue

@@ -79,13 +79,15 @@ export default {
       this.$refs.tagMode && this.$refs.tagMode.addParams(params)
       this.$refs.textMode && this.$refs.textMode.addParams(params)
     },
+    // params: [{column, operator, value}, ...]
     removeParams (params) {
       this.$refs.tagMode && this.$refs.tagMode.removeParams(params)
       this.$refs.textMode && this.$refs.textMode.removeParams(params)
     },
-    changeParams (n, o) {
+    // params: [{ newParam: {column, operator, value }, oldParam: { column, operator, value }], ...]
-      this.$refs.tagMode && this.$refs.tagMode.changeParams(n, o)
+    changeParams (params) {
-      this.$refs.textMode && this.$refs.textMode.changeParams(n, o)
+      this.$refs.tagMode && this.$refs.tagMode.changeParams(params)
+      this.$refs.textMode && this.$refs.textMode.changeParams(params)
     },
     setSql (sql) {
       if (this.searchMode === 'text') {

src/components/advancedSearch/TagMode.vue

@@ -242,8 +242,8 @@ export default {
       this.$emit('changeMode', 'text', formatSql)
     },
     // 处理value，例如转换IN的值
-    handleValue (value, column) {
+    handleValue (value, column, operator) {
-      const isArray = ['IN', 'NOT IN'].indexOf(column.operator.value) > -1
+      const isArray = ['IN', 'NOT IN'].indexOf(operator) > -1
       if (isArray) {
         if (this.$_.isArray(value)) {
           value = value.map(v => column.type === columnType.string ? stringInQuot(v) : v)
@@ -266,14 +266,39 @@ export default {
         meta.column.label = column ? column.label : param.column
         meta.operator.value = '='
         meta.operator.show = true
-        meta.value.value = this.handleValue(param.value, column)
+        meta.value.value = this.handleValue(param.value, column, column.operator)
         meta.value.show = true
         meta.value.label = meta.value.value
         this.addCondition(meta)
       })
     },
     changeParams (params) {
-
+      params.forEach(param => {
+        const oldColumn = this.columnList.find(column => {
+          return column.name === param.oldParam.column
+        })
+        const newColumn = this.columnList.find(column => {
+          return column.name === param.newParam.column
+        })
+        const meta = this.metaList.find(m => m.column.name === oldColumn.name && m.operator.value === param.oldParam.operator && m.value.value === this.handleValue(param.oldParam.value, oldColumn, param.oldParam.operator))
+        if (meta) {
+          meta.column.name = newColumn.name
+          meta.column.type = newColumn.type
+          meta.column.label = newColumn.label ? newColumn.label : newColumn.name
+          meta.operator.value = param.newParam.operator
+          meta.value.value = this.handleValue(param.newParam.value, newColumn, param.newParam.operator)
+          meta.value.label = meta.value.value
+        }
+      })
+    },
+    removeParams (params) {
+      params.forEach(param => {
+        const column = this.columnList.find(c => {
+          return c.name === param.column
+        })
+        const metaIndex = this.metaList.findIndex(m => m.column.name === param.column && m.operator.value === param.operator && m.value.value === this.handleValue(param.value, column, param.operator))
+        this.metaList.splice(metaIndex, 1)
+      })
     }
   },
   watch: {

src/components/advancedSearch/TextMode.vue

@@ -104,21 +104,27 @@ export default {
       })
       toRaw(this.codeMirror).setValue(current)
     },
-    removeParams () {
+    removeParams (params) {
-
+      let current = this.codeMirror.getValue()
+      params.forEach(param => {
+        const column = this.columnList.find(c => c.name === param.column)
+        // 将对应内容替换为空串
+        const sqlPiece = `${param.column}${handleOperatorSpace(param.operator)}${this.handleValue(param.value, column, param.operator)}`.trim()
+        current = current.replace(sqlPiece, '')
+      })
+      toRaw(this.codeMirror).setValue(current)
     },
     changeParams (params) {
-      Object.keys(params).forEach(key => {
-        const column = this.columnList.find(column => {
-          return column.name === key
-        })
-        console.info(this.columnList, params)
       let current = this.codeMirror.getValue()
-        let selected = column.value
+      params.forEach(param => {
-        // if (selected && selected.length )
+        const oldColumn = this.columnList.find(c => c.name === param.oldParam.column)
-        current = `${current ? current + 'AND ' : ''}${key}=${(column.type === columnType.string ? stringInQuot(params[key]) : params[key])}`
+        const newColumn = this.columnList.find(c => c.name === param.newParam.column)
-        toRaw(this.codeMirror).setValue(current)
+        // 将oldParam内容替换为newParam
+        const oldSqlPiece = `${param.oldParam.column}${handleOperatorSpace(param.oldParam.operator)}${this.handleValue(param.oldParam.value, oldColumn, param.oldParam.operator)}`.trim()
+        const newSqlPiece = `${param.newParam.column}${handleOperatorSpace(param.newParam.operator)}${this.handleValue(param.newParam.value, newColumn, param.newParam.operator)}`.trim()
+        current = current.replace(oldSqlPiece, newSqlPiece)
       })
+      toRaw(this.codeMirror).setValue(current)
     }
   },
   watch: {

src/components/advancedSearch/meta/sql-parser.js

@@ -70,6 +70,8 @@ export default class SqlParser extends SqlParserVisitor {
               let tempArr = temp.split(',')
               tempArr = tempArr.map(t => meta.column.type === columnType.string ? stringInQuot(t.trim()) : t.trim())
               meta.value.value = `(${tempArr.join(',')})`
+            } else {
+              meta.value.value = meta.column.type === columnType.string ? stringInQuot(meta.value.value.trim()) : meta.value.value.trim()
             }
             meta.value.label = meta.value.value
           }
@@ -156,7 +158,7 @@ export default class SqlParser extends SqlParserVisitor {
               tempArr = tempArr.map(t => this.tempMeta.column.type === columnType.string ? stringInQuot(t.trim()) : t.trim())
               this.tempMeta.value.value = `(${tempArr.join(',')})`
             } else {
-              this.tempMeta.value.value = value
+              this.tempMeta.value.value = this.tempMeta.column.type === columnType.string ? stringInQuot(value.trim()) : value.trim()
             }
             this.tempMeta.value.label = this.tempMeta.value.value
           }

src/utils/api.js

@@ -73,10 +73,13 @@ export const api = {
   entityIpDetailSecurity: '/interface/entity/detail/overview/ip/security',
   entityIpRelatedServerDomain: '/interface/entity/detail/overview/ip/relatedDomain',
   entityIpRelatedServerApp: '/interface/entity/detail/overview/ip/relatedApp',
-  //detection
+  // detection
-  detectionEventSeverity:'/interface/detection/filter/severity',
+  detectionEventSeverity: '/interface/detection/filter/severity',
-  detectionAttackType:'/interface/detection/filter/attackType',
+  detectionAttackType: '/interface/detection/filter/attackType',
-  detectionOffenderIp:'/interface/detection/filter/offenderIp',
+  detectionOffenderIp: '/interface/detection/filter/offenderIp',
+  detectionOffenderLocation: '/interface/detection/filter/offenderLocation',
+  detectionVictimIp: '/interface/detection/filter/victimIp',
+  detectionVictimLocation: '/interface/detection/filter/victimLocation',
   detectionSeverity:'/interface/detection/filter/severity',
   detectionListBasic:'/interface/detection/list/basic'
 }

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)
+        this.$refs.search.changeParams([{ newParam, oldParam }])
-      } else if (params.oldValue.length === 1 && params.newArray.length === 2) {
+      } 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

@@ -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,
+        startTime: getSecond(this.timeFilter.startTime),
-        q:this.q,
+        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,
+        startTime: getSecond(this.timeFilter.startTime),
-        q:this.q,
+        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,
+        startTime: getSecond(this.timeFilter.startTime),
-        q:this.q,
+        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,
+        startTime: getSecond(this.timeFilter.startTime),
-        q:this.q,
+        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