From c2c4cfc482f95023a06a72db113b963e62a61c5a Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Thu, 3 Mar 2022 23:21:33 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8Ddetection=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/constants.js                        |   9 ++
 src/views/charts/PanelChart.vue               |  26 ++++
 src/views/charts/charts/ChartMap.vue          | 121 +++++++++++++++++-
 src/views/charts/charts/tools.js              |   4 +
 src/views/detections/Index.vue                |  89 ++-----------
 .../DetectionPerformanceEventAppOverview.vue  |  19 +--
 ...etectionPerformanceEventDomainOverview.vue |  19 +--
 .../DetectionPerformanceEventIpOverview.vue   |   6 +-
 .../DetectionSecurityEventOverview.vue        |  20 +--
 9 files changed, 187 insertions(+), 126 deletions(-)

diff --git a/src/utils/constants.js b/src/utils/constants.js
index 022df4de..693e3ff9 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -170,6 +170,15 @@ export const detectionPageType = {
   performanceEvent: 'performanceEvent'
 }
 
+export const dnsServerRole = {
+  RTDNS: 'RTDNS',
+  TLDNS: 'TLDNS',
+  OPRDNS: 'OPRDNS',
+  ADNS: 'ADNS',
+  SBDNS: 'SBDNS',
+  RTDNSM: 'RTDNSM'
+}
+
 export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
   '#73BFDE', '#3BA172', '#FC8452', '#9960B4',
   '#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue
index 67c6c8fd..dae7e3a9 100644
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -46,6 +46,7 @@
 import ChartHeader from './ChartHeader'
 import Chart from '@/views/charts/Chart'
 import testData from './charts/testData'
+import { dnsServerRole } from '@/utils/constants'
 import {
   isEcharts,
   isSingleValue,
@@ -189,7 +190,11 @@ export default {
           ...this.entity,
           ...extraParams
         }
+        // 默认参数特殊处理
         const requestUrl = url || (chartParams && chartParams.url)
+        if (requestUrl && requestUrl.indexOf('dnsServerRole') > -1) {
+          this.queryParams.dnsServerRole = dnsServerRole.RTDNS
+        }
         if (requestUrl) {
           get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
             // if (this.chartInfo.type === 23 && testData) {
@@ -197,6 +202,27 @@ export default {
             // } else if (this.chartInfo.type === 24 && testData) {
             //   response = testData.data2
             // }
+            if (this.chartInfo.type === 3) {
+              response = {
+                code: 200,
+                data: {
+                  result: [
+                    {
+                      "dnsServerRole":"TLDNS",
+                      "ipLocationCountry":"China",
+                      "ipLocationId":"CN",
+                      "count":161
+                    },
+                    {
+                      "dnsServerRole":"RTDNS",
+                      "ipLocationCountry":"Japan",
+                      "ipLocationId":"JP",
+                      "count":222
+                    }
+                  ]
+                }
+              }
+            }
             if (response.code === 200) {
               if (Array.isArray(response.data.result)) {
                 response.data.result.forEach(item => {
diff --git a/src/views/charts/charts/ChartMap.vue b/src/views/charts/charts/ChartMap.vue
index 0c8eeef2..33c45805 100644
--- a/src/views/charts/charts/ChartMap.vue
+++ b/src/views/charts/charts/ChartMap.vue
@@ -6,10 +6,9 @@
 <script>
 import * as am4Core from '@amcharts/amcharts4/core'
 import * as am4Maps from '@amcharts/amcharts4/maps'
-import { getGeoData, replaceUrlPlaceholder } from '@/utils/tools'
-import { storageKey } from '@/utils/constants'
-
-import { isMapBlock } from './tools'
+import { getGeoData, replaceUrlPlaceholder, getCapitalGeo } from '@/utils/tools'
+import { storageKey, dnsServerRole } from '@/utils/constants'
+import { isMapBlock, isMapPoint } from './tools'
 import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
 import { HeatLegend } from '@/components/amcharts/heatLegend'
 import { getData } from '@/utils/api'
@@ -72,6 +71,7 @@ export default {
       })
     },
     loadAm4ChartMap (polygonSeries, country, chartData) {
+      // chartData不为空是下钻
       if (chartData) {
         this.$emit('showLoading', true)
       }
@@ -111,8 +111,9 @@ export default {
             showValue: (r.value || r.value === 0) ? valueToRangeValue(r.value, chartParams.unitType).join(' ') : ''
           }))
           !this.$_.isEmpty(seriesData) && (polygonSeries.data = [...seriesData])
+          // 数据全为0的情况，legend只显示1个颜色
           const sorted = seriesData.sort((a, b) => b.value - a.value)
-          const allZero = this.$_.isEmpty(sorted) || Number(sorted[0].value) === 0 // 数据全为0的情况，legend只显示1个颜色
+          const allZero = this.$_.isEmpty(sorted) || Number(sorted[0].value) === 0
 
           polygonSeries.heatRules.push({
             property: 'fill',
@@ -142,6 +143,56 @@ export default {
           heatLegend.valueAxis.renderer.labels.template.adapter.add('text', function (labelText) {
             return ''
           })
+        } else if (data && this.isMapPoint) {
+          const seriesData = []
+          data.forEach(d => {
+            seriesData.push({
+              id: d.ipLocationId,
+              count: d.count,
+              dnsServerRole: d.dnsServerRole,
+              location: d.ipLocationCity || d.ipLocationProvince || d.ipLocationCountry,
+              desc: this.$t(this.dnsTypeI18n(d.dnsServerRole)),
+              color: this.circleColor[d.dnsServerRole].background,
+              border: this.circleColor[d.dnsServerRole].border
+            })
+          })
+          console.info(seriesData)
+          const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
+          imageSeries.data = seriesData
+          imageSeries.dataFields.value = 'count'
+
+          const imageTemplate = imageSeries.mapImages.template
+          imageTemplate.nonScaling = true
+
+          imageTemplate.adapter.add('latitude', function (latitude, target) {
+            const polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id)
+            if (polygon) {
+              return polygon.visualLatitude
+            }
+            return latitude
+          })
+
+          imageTemplate.adapter.add('longitude', function (longitude, target) {
+            const polygon = polygonSeries.getPolygonById(target.dataItem.dataContext.id)
+            if (polygon) {
+              return polygon.visualLongitude
+            }
+            return longitude
+          })
+
+          const circle = imageTemplate.createChild(am4Core.Circle)
+          circle.propertyFields.fill = 'color'
+          circle.propertyFields.stroke = 'border'
+          circle.strokeWidth = 1
+          circle.tooltipText = '[bold]{location}[/]\n{desc}: {count}'
+
+          imageSeries.heatRules.push({
+            target: circle,
+            property: 'radius',
+            min: 4,
+            max: 30,
+            dataField: 'value'
+          })
         }
       } catch (e) {
         console.error(e)
@@ -161,6 +212,37 @@ export default {
         this.myChart.goHome()
       })
     },
+    dnsTypeI18n (role) {
+      let i18n = ''
+      switch (role) {
+        case dnsServerRole.RTDNS: {
+          i18n = 'dns.rootDomainServers'
+          break
+        }
+        case dnsServerRole.TLDNS: {
+          i18n = 'dns.topLevelDomainServers'
+          break
+        }
+        case dnsServerRole.OPRDNS: {
+          i18n = 'dns.publicRecursiveDomainServers'
+          break
+        }
+        case dnsServerRole.ADNS: {
+          i18n = 'dns.authoritativeDomainServers'
+          break
+        }
+        case dnsServerRole.SBDNS: {
+          i18n = 'dns.selfBuiltDomainServers'
+          break
+        }
+        case dnsServerRole.RTDNSM: {
+          i18n = 'RTDNSM'
+          break
+        }
+        default: break
+      }
+      return i18n
+    },
     generateTooltipHTML () {
       return `
         <div class="map-tooltip" style="padding-bottom: 10px;">
@@ -206,8 +288,35 @@ export default {
     }
   },
   setup (props) {
+    const circleColor = {}
+    circleColor[dnsServerRole.RTDNS] = {
+      background: '#C0DEFE',
+      border: '#478AD5'
+    }
+    circleColor[dnsServerRole.TLDNS] = {
+      background: '#DBCFFA',
+      border: '#AA8CF2'
+    }
+    circleColor[dnsServerRole.ADNS] = {
+      background: '#A0E8E0',
+      border: '#1CC9B5'
+    }
+    circleColor[dnsServerRole.OPRDNS] = {
+      background: '#FFE1B5',
+      border: '#FFB84E'
+    }
+    circleColor[dnsServerRole.SBDNS] = {
+      background: '#FDC6C6',
+      border: '#FA7777'
+    }
+    circleColor[dnsServerRole.RTDNSM] = {
+      background: '#ECC6F7',
+      border: '#BF49DF'
+    }
     return {
-      isMapBlock: isMapBlock(props.chartInfo.type)
+      circleColor,
+      isMapBlock: isMapBlock(props.chartInfo.type),
+      isMapPoint: isMapPoint(props.chartInfo.type)
     }
   }
 }
diff --git a/src/views/charts/charts/tools.js b/src/views/charts/charts/tools.js
index 120fb3d6..ffbc1ca1 100644
--- a/src/views/charts/charts/tools.js
+++ b/src/views/charts/charts/tools.js
@@ -63,6 +63,10 @@ export function isMapLine (type) {
 export function isMapBlock (type) {
   return type === 2
 }
+/* 散点地图 */
+export function isMapPoint (type) {
+  return type === 3
+}
 /* 普通折线图 */
 export function isEchartsLine (type) {
   return type === 11
diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue
index 478f743c..9f2035f9 100644
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -402,82 +402,6 @@ export default {
         ]*/
         this.statisticsSeverityData = data
         //this.isStatisticsSeverityNoData = true
-        this.filterData = {
-          securityEvent: [
-            {
-              title: this.$t('detections.eventSeverity'),
-              column: 'eventSeverity',
-              collapse: false,
-              value: [], // value之间是or的关系
-              data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
-            },
-            {
-              title: this.$t('detections.securityType'),
-              column: 'securityType',
-              collapse: false,
-              value: [],
-              data: [] // 从接口动态获取
-            },
-            {
-              title: this.$t('detections.victimIp'),
-              column: 'victimIp',
-              collapse: false,
-              value: [],
-              showMore: true,
-              showIndex: 9,
-              data: [] // 从接口动态获取
-            },
-            {
-              title: this.$t('detections.victimLocation'),
-              column: 'victimLocationCountry',
-              collapse: false,
-              value: [],
-              showMore: false,
-              showIndex: 9,
-              data: [
-                {
-                  label: 'China',
-                  value: 'china',
-                  count: 50
-                }
-              ] // 从接口动态获取
-            },
-            {
-              title: this.$t('detections.offenderIp'),
-              column: 'offenderIp',
-              collapse: false,
-              value: [],
-              showMore: false,
-              showIndex: 9,
-              data: [] // 从接口动态获取
-            },
-            {
-              title: this.$t('detections.offenderLocation'),
-              column: 'offenderLocationCountry',
-              collapse: false,
-              value: [],
-              showMore: false,
-              showIndex: 9,
-              data: [] // 从接口动态获取
-            }
-          ],
-          performanceEvent: [
-            {
-              title: this.$t('detections.eventSeverity'),
-              column: 'eventSeverity',
-              collapse: false,
-              value: [], // value之间是or的关系
-              data: [] // 从接口动态获取，本项在获得数据后需要特殊处理左边框颜色
-            },
-            {
-              title: this.$t('detections.securityType'),
-              column: 'securityType',
-              collapse: false,
-              value: [],
-              data: [] // 从接口动态获取
-            }
-          ]
-        }
         if (!this.$_.isEmpty(data)) {
           this.filterData[this.pageType][0].data = data.map(r => ({ label: r.eventSeverity, value: r.eventSeverity, count: r.count }))
           const eventSeverityOption = this.$_.cloneDeep(pieForSeverity)
@@ -788,7 +712,9 @@ export default {
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
-        q: this.q
+        q: this.q,
+        pageSize: this.pageObj.pageSize,
+        pageNo: this.pageObj.pageNo
       }
       getData(api.detection[this.pageType].listBasic, params).then(data => {
         if (this.pageType === detectionPageType.securityEvent) {
@@ -1126,7 +1052,16 @@ export default {
       this.queryList()
       this.queryListTotal()
     },
+    resetFilterData () {
+      this.filterData.securityEvent.forEach(d => {
+        d.data = []
+      })
+      this.filterData.performanceEvent.forEach(d => {
+        d.data = []
+      })
+    },
     queryFilter () {
+      this.resetFilterData()
       const params = {
         startTime: getSecond(this.timeFilter.startTime),
         endTime: getSecond(this.timeFilter.endTime),
diff --git a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
index c7f2926f..09d87aa2 100644
--- a/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventAppOverview.vue
@@ -8,7 +8,7 @@
       <div class="overview__title">Fields</div>
       <div class="overview__row">
         <div class="row__label">{{$t('entities.category')}}</div>
-        <div class="row__content">{{basicInfo.appCategory}}</div>
+        <div class="row__content">{{basicInfo.appCategory || '-'}}</div>
       </div>
       <div class="overview__row">
         <div class="row__label">{{$t('entities.subcategory')}}</div>
@@ -35,8 +35,7 @@
 </template>
 
 <script>
-import { get } from '@/utils/http'
-import { api } from '@/utils/api'
+import { api, getData } from '@/utils/api'
 import { eventSeverityColor } from '@/utils/constants'
 export default {
   name: 'DetectionPerformanceEventAppOverview',
@@ -74,21 +73,17 @@ export default {
   },
   methods: {
     query () {
-      this.basicInfo = {
-      }
       this.queryBasic().then(responses => {
+        responses && (this.basicInfo = responses)
       })
     },
     queryBasic () {
       return new Promise((resolve, reject) => {
         try {
-          get(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(response => {
-            if (response.code === 200) {
-              this.basicInfo = response.data.result[0]
-              resolve(response.data.result)
-            } else {
-              reject(response)
-            }
+          getData(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(data => {
+            resolve(data[0])
+          }).catch(error => {
+            reject(error)
           })
         } catch (e) {
           reject(e)
diff --git a/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue b/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
index 8307e98f..7745936f 100644
--- a/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventDomainOverview.vue
@@ -8,7 +8,7 @@
       <div class="overview__title">Fields</div>
       <div class="overview__row">
         <div class="row__label">{{$t('entities.category')}}</div>
-        <div class="row__content">{{basicInfo.domainCategoryName}}</div>
+        <div class="row__content">{{basicInfo.domainCategoryName || '-'}}</div>
       </div>
       <div class="overview__row">
         <div class="row__label">{{$t('entities.group')}}</div>
@@ -39,8 +39,7 @@
 </template>
 
 <script>
-import { get } from '@/utils/http'
-import { api } from '@/utils/api'
+import { api, getData } from '@/utils/api'
 import { eventSeverityColor } from '@/utils/constants'
 export default {
   name: 'DetectionPerformanceEventDomainOverview',
@@ -78,21 +77,17 @@ export default {
   },
   methods: {
     query () {
-      this.basicInfo = {
-      }
       this.queryBasic().then(responses => {
+        responses && (this.basicInfo = responses)
       })
     },
     queryBasic () {
       return new Promise((resolve, reject) => {
         try {
-          get(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(response => {
-            if (response.code === 200) {
-              this.basicInfo = response.data.result[0]
-              resolve(response.data.result)
-            } else {
-              reject(response)
-            }
+          getData(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.appName }).then(data => {
+            resolve(data[0])
+          }).catch(error => {
+            reject(error)
           })
         } catch (e) {
           reject(e)
diff --git a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
index 6f889227..21120325 100644
--- a/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
+++ b/src/views/detections/overview/DetectionPerformanceEventIpOverview.vue
@@ -65,17 +65,15 @@ export default {
   },
   methods: {
     query () {
-      this.basicInfo = {
-      }
       this.queryBasic().then(responses => {
+        responses && (this.basicInfo = responses)
       })
     },
     queryBasic () {
       return new Promise((resolve, reject) => {
         try {
           getData(api.detection.performanceEvent.overviewBasic, { serverIp: this.detection.serverIp }).then(data => {
-            this.basicInfo = data[0]
-            resolve(data)
+            resolve(data[0])
           }).catch(error => {
             reject(error)
           })
diff --git a/src/views/detections/overview/DetectionSecurityEventOverview.vue b/src/views/detections/overview/DetectionSecurityEventOverview.vue
index 0dca62a7..b2823b58 100644
--- a/src/views/detections/overview/DetectionSecurityEventOverview.vue
+++ b/src/views/detections/overview/DetectionSecurityEventOverview.vue
@@ -3,7 +3,7 @@
     <div class="overview__left">
       <div class="overview__title">{{$t('overall.remark')}}</div>
       <div class="overview__row">
-        <div class="row__content">{{basicInfo.malwareDescription || '-'}}</div>
+        <div class="row__content">Description</div>
       </div>
       <div class="overview__title">Fields</div>
       <div class="overview__row">
@@ -178,11 +178,9 @@ export default {
   methods: {
     getMillisecond,
     query () {
-      this.basicInfo = {
-      }
-      this.events = [
-      ]
       Promise.all([this.queryBasic(), this.queryEvent()]).then(responses => {
+        responses[0] && (this.basicInfo = responses[0])
+        responses[1] && (this.events = responses[1])
       })
     },
     queryBasic () {
@@ -190,11 +188,7 @@ export default {
         try {
           get(api.detection.securityEvent.overviewBasic, { eventId: this.detection.eventId }).then(response => {
             if (response.code === 200) {
-              let data = response.data.result[0]
-                    if (!this.$_.isEmpty(data)) {
-                this.basicInfo = data
-              }
-              resolve(response.data.result)
+              resolve(response.data.result[0])
             } else {
               reject(response)
             }
@@ -207,12 +201,8 @@ export default {
     queryEvent () {
       return new Promise((resolve, reject) => {
         try {
-          get(api.detection.securityEvent.overviewEvent, { eventId: this.detection.eventId }).then(response => {
+          get(api.detection.securityEvent.overviewEvent, { eventId: this.detection.eventId, offenderIp: this.detection.offenderIp, victimIp: this.detection.victimIp }).then(response => {
             if (response.code === 200) {
-              let data = response.data.result
-              if (!this.$_.isEmpty(data)) {
-                this.events = response.data.result
-              }
               resolve(response.data.result)
             } else {
               reject(response)