From 98987be11cb262854a35589255bfd8ee7efc4ae8 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 8 Mar 2022 22:06:58 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix:=20dns=E5=9C=B0=E5=9B=BE=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=EF=BC=9Bdetection=E4=B8=8B=E6=8B=89=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=EF=BC=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/tools.js                            |  11 +-
 src/views/charts/PanelChart.vue               |  26 ---
 src/views/charts/charts/ChartEchart.vue       |   6 +-
 src/views/charts/charts/ChartMap.vue          | 188 +++++++++++-------
 src/views/detections/Index.vue                |   4 +-
 .../DetectionSecurityEventOverview.vue        |   6 +-
 6 files changed, 129 insertions(+), 112 deletions(-)

diff --git a/src/utils/tools.js b/src/utils/tools.js
index 1280e719..098575b3 100644
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -442,14 +442,17 @@ export function lineToHump (name) {
     return letter.toUpperCase()
   })
 }
-// 下划线转换空格首位大写
+// 驼峰转空格，首字母小写
+export function humpToSpace (name) {
+  const str = name.replace(/([A-Z])/g, ' $1')
+  return str.split(' ').map(s => _.lowerFirst(s)).join(' ')
+}
+// 下划线转换空格
 export function lineToSpace (name) {
   if (_.isEmpty(name)) {
     return ''
   }
-  return _.upperFirst(name.replace(/\_(\w)/g, function (all, letter) {
-    return ` ${letter.toUpperCase()}`
-  }))
+  return name.replace(/\_(\w)/g, ' ')
 }
 // 驼峰转换下划线
 export function humpToLine (name) {
diff --git a/src/views/charts/PanelChart.vue b/src/views/charts/PanelChart.vue
index 5eec4338..4b5caafc 100644
--- a/src/views/charts/PanelChart.vue
+++ b/src/views/charts/PanelChart.vue
@@ -193,32 +193,6 @@ export default {
         }
         if (requestUrl) {
           get(replaceUrlPlaceholder(requestUrl, this.queryParams)).then(response => {
-            // if (this.chartInfo.type === 23 && testData) {
-            //   response = testData.data
-            // } else if (this.chartInfo.type === 24 && testData) {
-            //   response = testData.data2
-            // }
-            if (this.chartInfo.type === 3) {
-              response = {
-                code: 200,
-                data: {
-                  result: [
-                    {
-                      dnsServerRole: extraParams.dnsServerRole || dnsServerRole.RTDNS,
-                      ipLocationCountry: 'China',
-                      ipLocationId: 'CN',
-                      count: 161
-                    },
-                    {
-                      dnsServerRole: extraParams.dnsServerRole || 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/ChartEchart.vue b/src/views/charts/charts/ChartEchart.vue
index cad57cf6..562e8ecc 100644
--- a/src/views/charts/charts/ChartEchart.vue
+++ b/src/views/charts/charts/ChartEchart.vue
@@ -5,10 +5,10 @@
 <script>
 import unitConvert from '@/utils/unit-convert'
 import * as echarts from 'echarts'
-import { lineToSpace,sortBy } from '@/utils/tools'
+import { lineToSpace, sortBy, humpToSpace } from '@/utils/tools'
 import { unitTypes } from '@/utils/constants'
 import chartEchartMixin from './chart-echart-mixin'
-import { getOption, isEchartsPie } from './tools'
+import { isEchartsPie } from './tools'
 import { legendMapping } from '@/views/charts/charts/chart-table-title'
 
 export default {
@@ -106,7 +106,7 @@ export default {
         this.chartOption.series = this.chartData.map(r => {
           return {
             ...seriesTemplate,
-            name: legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] ? legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] : lineToSpace(r.legend),
+            name: legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] ? legendMapping[`${this.entity && this.entity.ip ? 'ip_' : ''}${r.legend}`] : humpToSpace(r.legend),
             data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType])
           }
         })
diff --git a/src/views/charts/charts/ChartMap.vue b/src/views/charts/charts/ChartMap.vue
index d4f576cc..44128447 100644
--- a/src/views/charts/charts/ChartMap.vue
+++ b/src/views/charts/charts/ChartMap.vue
@@ -43,6 +43,8 @@ export default {
       showMapBackButton: false,
       polygonSeries: null, // 世界地图series
       countrySeries: null, // 下钻国家series
+      worldImageSeries: null, // 世界地图圆点series
+      countryImageSeries: null, // 下钻国家圆点series
       currentLegendIndex: 0,
       legends: [
         {
@@ -107,43 +109,56 @@ export default {
       chart.geodata = getGeoData(storageKey.iso36112WorldLow)
       chart.projection = new am4Maps.projections.Miller()
       this.myChart = chart
-      const polygonSeries = chart.series.push(new am4Maps.MapPolygonSeries())
-      polygonSeries.useGeodata = true
-      polygonSeries.exclude = ['AQ'] // 排除南极洲
-      polygonSeries.tooltip.getFillFromObject = false
-      polygonSeries.tooltip.background.fill = am4Core.color('#FFFFFF')
-      this.polygonSeries = polygonSeries
-      const polygonTemplate = polygonSeries.mapPolygons.template
-      polygonTemplate.tooltipHTML = this.generateTooltipHTML()
-      polygonTemplate.nonScalingStroke = true
-      polygonTemplate.strokeWidth = 0.5
-      polygonTemplate.fill = am4Core.color('rgba(176,196,222,.5)')
-      this.loadAm4ChartMap(this.polygonSeries)
+
+      this.polygonSeries = this.polygonSeriesFactory()
+
+      if (this.isMapPoint) {
+        this.worldImageSeries = this.imageSeriesFactory()
+      }
+
+      this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
+
       // 地图点击事件
-      polygonTemplate.events.on('hit', async ev => {
-        const countryId = ev.target.dataItem.dataContext.id
-        if (countryId) {
-          ev.target.series.chart.zoomToMapObject(ev.target)
-          ev.target.isHover = false
-          this.countrySeries = chart.series.push(new am4Maps.MapPolygonSeries())
-          this.countrySeries.tooltip.getFillFromObject = false
-          this.countrySeries.tooltip.background.fill = am4Core.color('#FFFFFF')
-          const countryTemplate = this.countrySeries.mapPolygons.template
-          countryTemplate.tooltipHTML = this.generateTooltipHTML()
-          countryTemplate.nonScalingStroke = true
-          countryTemplate.strokeWidth = 0.5
-          countryTemplate.fill = am4Core.color('rgba(176,196,222,.5)')
-          const geoData = getGeoData(countryId)
-          if (geoData) {
-            this.countrySeries.geodata = geoData
-            this.polygonSeries.hide()
-            const country = ev.target.dataItem.dataContext.serverCountry
-            const queryParams = { ...this.queryParams, country }
-            const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
-            this.loadAm4ChartMap(this.countrySeries, ev.target.dataItem.dataContext.serverCountry, chartData)
+      if (this.isMapBlock) {
+        this.polygonSeries.mapPolygons.template.events.on('hit', async ev => {
+          const countryId = ev.target.dataItem.dataContext.id
+          if (countryId) {
+            ev.target.series.chart.zoomToMapObject(ev.target)
+            ev.target.isHover = false
+            const geoData = getGeoData(countryId)
+            if (geoData) {
+              this.countrySeries = this.polygonSeriesFactory()
+              this.countrySeries.geodata = geoData
+              this.polygonSeries.hide()
+              const country = ev.target.dataItem.dataContext.serverCountry
+              const queryParams = { ...this.queryParams, country }
+              const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
+              this.loadAm4ChartMap(this.countrySeries, null, country, chartData)
+            }
           }
-        }
-      })
+        })
+      } else if (this.isMapPoint) {
+        this.worldImageSeries.mapImages.template.events.on('hit', async ev => {
+          const countryId = ev.target.dataItem.dataContext.id
+          ev.target.isHover = false
+          if (countryId) {
+            const targetMapObject = this.polygonSeries.getPolygonById(countryId)
+            targetMapObject.series.chart.zoomToMapObject(targetMapObject)
+            const geoData = getGeoData(countryId)
+            if (geoData) {
+              this.countrySeries = this.polygonSeriesFactory()
+              this.countrySeries.geodata = geoData
+              this.countryImageSeries = this.imageSeriesFactory()
+              this.polygonSeries.hide()
+              this.worldImageSeries.hide()
+              const country = ev.target.dataItem.dataContext.location
+              const queryParams = { ...this.queryParams, ipLocationCountry: country }
+              const chartData = await getData(replaceUrlPlaceholder(this.chartInfo.params.url, queryParams))
+              this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
+            }
+          }
+        })
+      }
       // dns地图legend上的数据
       if (!_.isEmpty(this.chartInfo.params.legendUrl)) {
         setTimeout(() => {
@@ -155,7 +170,60 @@ export default {
         })
       }
     },
-    loadAm4ChartMap (polygonSeries, country, chartData) {
+    polygonSeriesFactory () {
+      const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())
+      polygonSeries.useGeodata = true
+      polygonSeries.exclude = ['AQ'] // 排除南极洲
+      polygonSeries.tooltip.getFillFromObject = false
+      polygonSeries.tooltip.background.fill = am4Core.color('#FFFFFF')
+      const polygonTemplate = polygonSeries.mapPolygons.template
+      polygonTemplate.tooltipHTML = this.generateTooltipHTML()
+      polygonTemplate.nonScalingStroke = true
+      polygonTemplate.strokeWidth = 0.5
+      polygonTemplate.fill = am4Core.color('rgba(176,196,222,.5)')
+      return polygonSeries
+    },
+    imageSeriesFactory (dataField) {
+      const vm = this
+      const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
+      imageSeries.dataFields.value = dataField || 'count'
+
+      const imageTemplate = imageSeries.mapImages.template
+      imageTemplate.nonScaling = true
+
+      imageTemplate.adapter.add('latitude', function (latitude, target) {
+        const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
+        if (polygon) {
+          return polygon.visualLatitude
+        }
+        return latitude
+      })
+
+      imageTemplate.adapter.add('longitude', function (longitude, target) {
+        const polygon = vm.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: 6,
+        max: 25,
+        dataField: 'value'
+      })
+
+      return imageSeries
+    },
+    loadAm4ChartMap (polygonSeries, imageSeries, country, chartData) {
       // chartData不为空是下钻
       if (chartData) {
         this.$emit('showLoading', true)
@@ -163,6 +231,7 @@ export default {
       try {
         // 清除数据
         polygonSeries.data.splice(0)
+
         // 清除legend
         this.myChart.children.each((s, i) => {
           if (s && s.className !== 'Container') {
@@ -237,46 +306,11 @@ export default {
               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
+              color: this.circleColor[d.dnsServerRole.toUpperCase()].background,
+              border: this.circleColor[d.dnsServerRole.toUpperCase()].border
             })
           })
-          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: 6,
-            max: 25,
-            dataField: 'value'
-          })
         }
       } catch (e) {
         console.error(e)
@@ -290,9 +324,15 @@ export default {
     },
     mapBack () {
       this.countrySeries.hide()
+      if (this.isMapPoint) {
+        this.countryImageSeries.hide()
+      }
       this.$nextTick(() => {
         this.showMapBackButton = false
         this.polygonSeries.show()
+        if (this.isMapPoint) {
+          this.worldImageSeries.show()
+        }
         this.myChart.goHome()
       })
     },
@@ -302,7 +342,7 @@ export default {
     },
     dnsTypeI18n (role) {
       let i18n = ''
-      switch (role) {
+      switch (role.toUpperCase()) {
         case dnsServerRole.RTDNS: {
           i18n = 'dns.rootDomainServers'
           break
diff --git a/src/views/detections/Index.vue b/src/views/detections/Index.vue
index be21cafb..4e90c372 100644
--- a/src/views/detections/Index.vue
+++ b/src/views/detections/Index.vue
@@ -1096,11 +1096,11 @@ export default {
       this.$refs.search.changeParams(params)
     },
     pageSize (val) {
-      this.pageObj.pageSize = val
+      this.pageObj.pageSize = val || 20
       this.search(this.metaList, this.q)
     },
     pageNo (val) {
-      this.pageObj.pageNo = val
+      this.pageObj.pageNo = val || 1
       this.search(this.metaList, this.q)
     },
     // 点击上一页箭头
diff --git a/src/views/detections/overview/DetectionSecurityEventOverview.vue b/src/views/detections/overview/DetectionSecurityEventOverview.vue
index dbcd4d78..f0661068 100644
--- a/src/views/detections/overview/DetectionSecurityEventOverview.vue
+++ b/src/views/detections/overview/DetectionSecurityEventOverview.vue
@@ -180,7 +180,7 @@ export default {
         const eventStartTime = event.startTime
         const entityStartTime = this.detection.startTime
 
-        if (!_.isEmpty(diffSeconds) && !_.isEmpty(eventStartTime) && !_.isEmpty(entityStartTime)) {
+        if (_.isNumber(diffSeconds) && _.isNumber(eventStartTime) && _.isNumber(entityStartTime)) {
           const suffix = unitConvert(diffSeconds, unitTypes.time, 's', null, 0).join('')
           if (eventStartTime > entityStartTime) {
             return `T0+${suffix}`
@@ -197,13 +197,13 @@ export default {
     query () {
       Promise.all([this.queryBasic(), this.queryEvent()]).then(responses => {
         responses[0] && (this.basicInfo = responses[0])
-        responses[1] && (this.events = responses[1])
+        responses[1] && (this.events = responses[1].sort((e1, e2) => e1.startTime - e2.startTime))
       })
     },
     queryBasic () {
       return new Promise((resolve, reject) => {
         try {
-          get(api.detection.securityEvent.overviewBasic, { eventId: this.detection.eventId, startTime: this.detection.startTime }).then(response => {
+          get(api.detection.securityEvent.overviewBasic, { eventId: this.detection.eventId, startTime: this.detection.startTime, endTime: this.detection.endTime }).then(response => {
             if (response.code === 200) {
               resolve(response.data.result[0])
             } else {

From b234e50e9b77b0eb9b0292242d9c8d25cdd1f1a5 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Tue, 8 Mar 2022 22:38:43 +0800
Subject: [PATCH 2/2] =?UTF-8?q?fix:=20detection=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=83=A8=E5=88=86=E6=97=A0=E6=95=B0=E6=8D=AE=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/detections/DetectionRow.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/views/detections/DetectionRow.vue b/src/views/detections/DetectionRow.vue
index 4428c7f0..dc3b9e0a 100644
--- a/src/views/detections/DetectionRow.vue
+++ b/src/views/detections/DetectionRow.vue
@@ -8,10 +8,10 @@
       <div class="cn-detection__icon" :style="`background-color: ${eventSeverityColor[detection.eventSecurity]}`"></div>
       <div class="cn-detection__row">
         <div class="cn-detection__header" v-if="pageType === detectionPageType.securityEvent">
-          <i class="cn-icon cn-icon-attacker" ></i>{{detection.offenderIp}}
+          <i class="cn-icon cn-icon-attacker" ></i>{{detection.offenderIp || '-'}}
           <span class="line">-------</span>
           <span class="circle"></span>
-          <i class="cn-icon cn-icon-attacked" ></i>{{detection.victimIp}}
+          <i class="cn-icon cn-icon-attacked" ></i>{{detection.victimIp || '-'}}
         </div>
         <div class="cn-detection__header" v-else-if="pageType === detectionPageType.performanceEvent">
           <div class="cn-entity__icon"><i :class="iconClass"></i></div>
@@ -23,44 +23,44 @@
               <div class="basic-info__item" v-if="detection.eventSecurity">
                 <i class="cn-icon cn-icon-severity-level"></i>
                 <span>{{$t('detection.list.eventSecurity')}}&nbsp;:&nbsp;&nbsp;</span>
-                <span>{{detection.eventSecurity}}</span>
+                <span>{{detection.eventSecurity || '-'}}</span>
               </div>
               <div class="basic-info__item" v-if="detection.eventSeverity">
                 <i class="cn-icon cn-icon-severity-level"></i>
                 <span>{{$t('detections.eventSeverity')}}&nbsp;:&nbsp;&nbsp;</span>
-                <span>{{detection.eventSeverity}}</span>
+                <span>{{detection.eventSeverity || '-'}}</span>
               </div>
               <div class="basic-info__item" v-if="detection.securityType">
                 <i class="cn-icon cn-icon-event-type"></i>
                 <span>{{$t('detection.list.securityType')}}&nbsp;:&nbsp;&nbsp;</span>
-                <span>{{detection.securityType}}</span>
+                <span>{{detection.securityType || '-'}}</span>
               </div>
               <div class="basic-info__item" v-if="detection.eventType">
                 <i class="cn-icon cn-icon-event-type"></i>
                 <span>{{$t('detections.eventType')}}&nbsp;:&nbsp;&nbsp;</span>
-                <span>{{detection.eventType}}</span>
+                <span>{{detection.eventType || '-'}}</span>
               </div>
               <div class="basic-info__item" v-if="detection.malwareName">
                 <i class="cn-icon cn-icon-trojan"></i>
                 <span>{{$t('detection.list.malwareName')}}&nbsp;:&nbsp;&nbsp;</span>
-                <span>{{detection.malwareName}}</span>
+                <span>{{detection.malwareName || '-'}}</span>
               </div>
               <div class="basic-info__item" v-if="detection.cryptominingPool">
                 <i class="cn-icon cn-icon-mining-pool"></i>
                 <span>{{$t('detection.list.cryptominingPool')}}&nbsp;:&nbsp;&nbsp;</span>
-                <span>{{detection.cryptominingPool}}</span>
+                <span>{{detection.cryptominingPool || '-'}}</span>
               </div>
               <div class="basic-info__item">
                 <i class="cn-icon cn-icon-time2"></i>
                 <span>{{$t('detection.list.startTime')}}&nbsp;:&nbsp;&nbsp;</span>
-                <span>{{dayJs.tz(getMillisecond(detection.startTime)).format('YYYY-MM-DD HH:mm:ss')}}</span>
+                <span>{{dayJs.tz(getMillisecond(detection.startTime)).format('YYYY-MM-DD HH:mm:ss') || '-'}}</span>
               </div>
               <div class="basic-info__item">
                 <i class="cn-icon cn-icon-time2"></i>
                 <span>{{$t('overall.duration')}}&nbsp;:&nbsp;&nbsp;</span>
                 <span style="display: inline-block;height: 6px;width: 6px;border-radius: 50%;margin-right: 8px;"
                       :style="pointColor(detection)"></span>
-                <span>{{unitConvert(detection.durationMs, 'time', null, null, 0).join(' ')}}</span>
+                <span>{{unitConvert(detection.durationMs, 'time', null, null, 0).join(' ') || '-'}}</span>
               </div>
             </div>
           </div>