feat: npm下钻功能内容准备

src/main.js

@@ -6,7 +6,7 @@ import store from '@/store'
 import App from '@/App.vue'
 import { hasPermission } from '@/permission'
 import commonMixin from '@/mixins/common'
-import { cancelWithChange, clickOutside, noData } from '@/utils/tools'
+import { cancelWithChange, noData } from '@/utils/tools'
 import { ClickOutside } from 'element-plus/lib/directives'
 import i18n from '@/i18n'
 import hljsVuePlugin from '@highlightjs/vue-plugin'
@@ -15,19 +15,14 @@ import '@/assets/css/main.scss' // 样式入口
 import VueGridLayout from 'vue-grid-layout'
 import ElementPlus from 'element-plus'
 import bus from 'tiny-emitter'
-import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc' // dependent on utc plugin
-import timezone from 'dayjs/plugin/timezone'
-import advancedFormat from 'dayjs/plugin/advancedFormat'
-import weekday from 'dayjs/plugin/weekday'
 
 import DateTimeRange from '@/components/common/TimeRange/DateTimeRange'
 import TimeRefresh from '@/components/common/TimeRange/TimeRefresh'
 import PanelChartList from '@/views/charts/PanelChartList'
-const emitter = new bus()
-
 import 'lib-flexible'
 
+const emitter = new bus()
+
 const _ = require('lodash') // lodash工具
 
 /* dayjs.extend(utc)
@@ -46,7 +41,6 @@ app.use(hljsVuePlugin)
 app.use(VueGridLayout)
 
 app.directive('has', hasPermission) // 注册指令
-app.directive('click-outside', clickOutside)
 app.directive('ele-click-outside', ClickOutside)
 app.directive('cancel', cancelWithChange)
 app.directive('no-data', noData)

src/utils/constants.js

@@ -50,7 +50,8 @@ export const panelTypeAndRouteMapping = {
   ipEntityDetail: 4,
   domainEntityDetail: 5,
   appEntityDetail: 6,
-  cryptocurrency: 7
+  cryptocurrency: 7,
+  ipDrillDownTest: 8
 }
 
 /* operationLog state 执行状态属性 值与名称之间的映射 */

src/views/charts2/Chart.vue

@@ -41,6 +41,7 @@
     <npm-tabs
         v-else-if="chart.type === typeMapping.npm.npmTabs"
         :time-filter="timeFilter"
+        :chart="chart"
         @tabChange="npmTabChange"
     ></npm-tabs>
     <npm-network-quantity
@@ -78,6 +79,21 @@
         :time-filter="timeFilter"
         :chart="chart"
     ></npm-recent-events>
+    <related-sessions
+        v-else-if="chart.type === typeMapping.npm.relatedSessions"
+        :time-filter="timeFilter"
+        :chart="chart"
+    ></related-sessions>
+    <npm-ip-map
+        v-else-if="chart.type === typeMapping.npm.npmIpMap"
+        :time-filter="timeFilter"
+        :chart="chart"
+    ></npm-ip-map>
+    <npm-traffic-line
+        v-else-if="chart.type === typeMapping.npm.npmTrafficLine"
+        :time-filter="timeFilter"
+        :chart="chart"
+    ></npm-traffic-line>
   </div>
 </template>
 
@@ -85,20 +101,23 @@
 import Loading from '@/components/common/Loading'
 import ChartNoData from '@/views/charts/charts/ChartNoData'
 import { typeMapping } from '@/views/charts2/chart-tools'
-import NetworkOverviewLine from '@/views/charts2/charts/NetworkOverviewLine'
+import NetworkOverviewLine from '@/views/charts2/charts/networkOverview/NetworkOverviewLine'
-import NetworkOverviewDdosDetection from '@/views/charts2/charts/NetworkOverviewDdosDetection'
+import NetworkOverviewDdosDetection from '@/views/charts2/charts/networkOverview/NetworkOverviewDdosDetection'
-import NetworkOverviewPerformanceEvent from '@/views/charts2/charts/NetworkOverviewPerformanceEvent'
+import NetworkOverviewPerformanceEvent from '@/views/charts2/charts/networkOverview/NetworkOverviewPerformanceEvent'
-import NetworkOverviewTabs from '@/views/charts2/charts/NetworkOverviewTabs'
+import NetworkOverviewTabs from '@/views/charts2/charts/networkOverview/NetworkOverviewTabs'
-import NetworkOverviewApps from '@/views/charts2/charts/NetworkOverviewApps'
+import NetworkOverviewApps from '@/views/charts2/charts/networkOverview/NetworkOverviewApps'
-import NpmTabs from '@/views/charts2/charts/NpmTabs'
+import NpmTabs from '@/views/charts2/charts/npm/NpmTabs'
-import NpmAppEventTable from '@/views/charts2/charts/NpmAppEventTable'
+import NpmAppEventTable from '@/views/charts2/charts/npm/NpmAppEventTable'
-import NpmNetworkQuantity from '@/views/charts2/charts/NpmNetworkQuantity'
+import NpmNetworkQuantity from '@/views/charts2/charts/npm/NpmNetworkQuantity'
-import NpmAppCategoryScore from '@/views/charts2/charts/NpmAppCategoryScore'
+import NpmAppCategoryScore from '@/views/charts2/charts/npm/NpmAppCategoryScore'
-import NpmMap from '@/views/charts2/charts/NpmMap'
+import NpmMap from '@/views/charts2/charts/npm/NpmMap'
-import NpmLine from '@/views/charts2/charts/NpmLine'
+import NpmLine from '@/views/charts2/charts/npm/NpmLine'
-import NpmEventsByType from '@/views/charts2/charts/NpmEventsByType'
+import NpmEventsByType from '@/views/charts2/charts/npm/NpmEventsByType'
-import NpmRecentEvents from '@/views/charts2/charts/NpmRecentEvents'
+import NpmRecentEvents from '@/views/charts2/charts/npm/NpmRecentEvents'
-import NpmEventsHeader from '@/views/charts2/charts/NpmEventsHeader'
+import NpmEventsHeader from '@/views/charts2/charts/npm/NpmEventsHeader'
+import RelatedSessions from '@/views/charts2/charts/npm/RelatedSessions'
+import NpmIpMap from '@/views/charts2/charts/npm/NpmIpMap'
+import NpmTrafficLine from '@/views/charts2/charts/npm/NpmTrafficLine'
 import { get } from '@/utils/http'
 import { getNowTime, getSecond } from '@/utils/date-util'
 import { ref } from 'vue'
@@ -120,7 +139,10 @@ export default {
     NetworkOverviewApps,
     NpmTabs,
     NpmNetworkQuantity,
-    NpmAppEventTable
+    NpmAppEventTable,
+    RelatedSessions,
+    NpmIpMap,
+    NpmTrafficLine
   },
   props: {
     chart: Object,
@@ -210,7 +232,6 @@ export default {
     resizeLine () {
       this.$nextTick(function () {
         setTimeout(() => {
-          console.log(this.$refs)
           if (this.$refs.networkLine) {
             this.$refs.networkLine.resize()
           }

src/views/charts2/chart-tools.js

@@ -8,11 +8,14 @@ export const typeMapping = {
   },
   npm: {
     npmMap: 1,
+    npmIpMap: 2,
     npmLine: 101,
+    npmTrafficLine: 104,
     npmEventsByType: 301,
     npmAppCategoryScore: 702,
     npmTabs: 704,
     npmEventsHeader: 705,
+    relatedSessions: 706,
     npmNetworkQuantity: 703,
     npmRecentEvents: 602,
     appEventTable: 603

src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue

@@ -119,7 +119,7 @@ import { get, put } from '@/utils/http'
 import { api } from '@/utils/api'
 import _ from 'lodash'
 import { getSecond } from '@/utils/date-util'
-import { appTestData, appPrevTestData, providerTestData, providerPrevTestData } from './appsTestData'
+import { appTestData, appPrevTestData, providerTestData, providerPrevTestData } from '../appsTestData'
 import { getChainRatio } from '@/utils/tools'
 export default {
   name: 'NetworkOverviewApps',

src/views/charts2/charts/npm/NpmMap.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="cn-chart__map">
+    <div class="map-canvas" id="npmMap"></div>
+    <div class="map-filter">
+      <el-select
+          size="mini"
+          v-model="trafficDirection"
+          class="map-select map-select__direction"
+      >
+        <el-option value="Server">Server</el-option>
+        <el-option value="Client">Client</el-option>
+      </el-select>
+      <el-select
+          size="mini"
+          v-model="location"
+          class="map-select map-select__location"
+          clearable
+          placeholder="All"
+          filterable
+      >
+        <template #prefix><i class="cn-icon cn-icon-location" style="color: #575757;"></i></template>
+        <el-option v-for="(country, index) in locationOptions" :key="index" :value="country.value">{{country.label}}</el-option>
+      </el-select>
+    </div>
+    <div class="map-legend">
+      <div class="map-legend__row">
+        <div class="map-legend__symbol map-legend__symbol--green"></div>
+        <div class="map-legend__desc">{{$t('npm.highScore')}}</div>
+      </div>
+      <div class="map-legend__row">
+        <div class="map-legend__symbol map-legend__symbol--yellow"></div>
+        <div class="map-legend__desc">{{$t('npm.middleScore')}}</div>
+      </div>
+      <div class="map-legend__row">
+        <div class="map-legend__symbol map-legend__symbol--red"></div>
+        <div class="map-legend__desc">{{$t('npm.lowScore')}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapData, drillDownData } from '@/views/charts2/charts/mapTestData'
+import { shallowRef } from 'vue'
+import * as am4Core from '@amcharts/amcharts4/core'
+import * as am4Maps from '@amcharts/amcharts4/maps'
+import { getGeoData } from '@/utils/tools'
+import { storageKey, unitTypes } from '@/utils/constants'
+import locationOptions from '@/views/charts2/charts/locationOptions'
+import unitConvert, { valueToRangeValue } from '@/utils/unit-convert'
+
+export default {
+  name: 'NpmMap',
+  data () {
+    return {
+      locationOptions,
+      mapData,
+      drillDownData,
+      myChart: null,
+      polygonSeries: null,
+      countrySeries: null,
+      worldImageSeries: null,
+      countryImageSeries: null,
+      // Server | Client
+      trafficDirection: 'Server',
+      location: ''
+    }
+  },
+  methods: {
+    initMap () {
+      // 初始化插件
+      const chart = am4Core.create('npmMap', am4Maps.MapChart)
+      chart.geodata = getGeoData(storageKey.iso36112WorldLow)
+      chart.projection = new am4Maps.projections.Miller()
+      chart.homeZoomLevel = 2
+      chart.homeGeoPoint = {
+        latitude: 21,
+        longitude: 0
+      }
+      this.myChart = shallowRef(chart)
+      this.polygonSeries = shallowRef(this.polygonSeriesFactory())
+      this.worldImageSeries = shallowRef(this.imageSeriesFactory('score'))
+      // 渲染
+      this.loadAm4ChartMap(this.polygonSeries, this.worldImageSeries)
+      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 = shallowRef(this.polygonSeriesFactory())
+            this.countrySeries.geodata = geoData
+            this.countryImageSeries = shallowRef(this.imageSeriesFactory('score'))
+            this.polygonSeries.hide()
+            this.worldImageSeries.hide()
+            const country = ev.target.dataItem.dataContext.name
+            const queryParams = { ...this.queryParams, ipLocationCountry: country }
+            const chartData = this.drillDownData
+            this.loadAm4ChartMap(this.countrySeries, this.countryImageSeries, country, chartData)
+          }
+        }
+      })
+    },
+    loadAm4ChartMap (polygonSeries, imageSeries, country, chartData) {
+      // chartData不为空是下钻
+      if (chartData) {
+        this.$emit('showLoading', true)
+      }
+      try {
+        // 清除数据
+        polygonSeries.data.splice(0)
+
+        // 清除legend
+        this.myChart.children.each((s, i) => {
+          if (s && s.className !== 'Container') {
+            this.myChart.children.removeIndex(i)
+          }
+        })
+
+        this.showMapBackButton = !!country
+        const data = chartData || this.mapData
+        imageSeries.data = data.map(r => ({
+          score: r.score,
+          id: r.locationId,
+          color: this.scoreColor(r.score),
+          border: this.scoreColor(r.score)
+        }))
+      } catch (e) {
+        console.error(e)
+      } finally {
+        if (chartData) {
+          setTimeout(() => {
+            this.$emit('showLoading', false)
+          }, 200)
+        }
+      }
+    },
+    convertMapData (data) {
+    },
+    scoreColor (score) {
+      if (score >= 0 && score <= 2) {
+        return '#E26154'
+      } else if (score > 2 && score <= 4) {
+        return '#E5A219'
+      } else if (score > 4 && score <= 6) {
+        return '#7E9F54'
+      }
+    },
+    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('#41495D')
+      polygonSeries.tooltip.background.filters.clear()
+      polygonSeries.tooltip.background.stroke = '#41495D'
+      const polygonTemplate = polygonSeries.mapPolygons.template
+      polygonTemplate.nonScalingStroke = true
+      polygonTemplate.strokeWidth = 0.5
+      polygonTemplate.stroke = am4Core.color('#CAD2D3')
+      polygonTemplate.fill = am4Core.color('#EFEFEF')
+      return polygonSeries
+    },
+    imageSeriesFactory (dataField) {
+      const vm = this
+      // amcharts实例中增加地图图案series（用来在地图上画圆点、方块、连线等）
+      const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
+      // 指定接口数据中哪个字段名代表数值
+      imageSeries.dataFields.value = dataField || 'count'
+      // 取出图案的默认模板，用来接下来做自定义更改
+      const imageTemplate = imageSeries.mapImages.template
+      imageTemplate.nonScaling = true
+      // 通过地区ID来获取经纬度，设置后无需自己提供经纬度
+      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.tooltipHTML = this.generatePolygonTooltipHTML()
+      imageSeries.tooltip.getFillFromObject = false
+      imageSeries.tooltip.background.fill = am4Core.color('#41495D')
+      imageSeries.tooltip.background.filters.clear()
+      imageSeries.tooltip.background.stroke = '#41495D'
+
+      imageSeries.heatRules.push({
+        target: circle,
+        property: 'radius',
+        min: 15,
+        max: 15,
+        dataField: 'value'
+      })
+
+      return imageSeries
+    }
+  },
+  mounted () {
+    this.initMap()
+  }
+}
+</script>

src/views/charts2/charts/npm/NpmTabs.vue

@@ -2,27 +2,11 @@
   <div class="npm-tabs">
     <div class="npm-tabs__active-bar"></div>
     <el-tabs v-model="currentTab" ref="elTabs" type="border-card">
-      <el-tab-pane>
+      <el-tab-pane v-for="tab in tabs" :key="tab.i18n">
         <template #label>
           <div class="npm-tab__label">
-            <i class="cn-icon cn-icon-overview"></i>
+            <i :class="tab.icon"></i>
-            <span>{{$t('overall.overview')}}</span>
+            <span>{{$t(tab.i18n)}}</span>
-          </div>
-        </template>
-      </el-tab-pane>
-      <el-tab-pane>
-        <template #label>
-          <div class="npm-tab__label">
-            <i class="cn-icon cn-icon-location"></i>
-            <span>{{$t('overall.location')}}</span>
-          </div>
-        </template>
-      </el-tab-pane>
-      <el-tab-pane>
-        <template #label>
-          <div class="npm-tab__label">
-            <i class="cn-icon cn-icon-events"></i>
-            <span>{{$t('overall.events')}}</span>
           </div>
         </template>
       </el-tab-pane>
@@ -36,9 +20,13 @@ export default {
   data () {
     return {
       currentTab: 0,
-      leftOffset: 27
+      leftOffset: 27,
+      tabs: []
     }
   },
+  props: {
+    chart: Object
+  },
   watch: {
     currentTab (n) {
       this.$nextTick(() => {
@@ -52,10 +40,12 @@ export default {
       const { offsetLeft, clientWidth, clientLeft } = document.querySelector('.npm-tabs .el-tabs__item.is-active')
       const activeBar = document.querySelector('.npm-tabs .npm-tabs__active-bar')
       activeBar.style.cssText += `width: ${clientWidth + 2}px; left: ${offsetLeft + this.leftOffset + clientLeft - 1}px;`
-      console.info(activeBar.style.left)
     }
   },
   mounted () {
+    if (this.chart.params && this.chart.params.tabs) {
+      this.tabs = this.chart.params.tabs
+    }
     setTimeout(() => {
       this.handleActiveBar(0)
     }, 200)

src/views/charts2/charts/npm/NpmTrafficLine.vue

@@ -0,0 +1,9 @@
+<template>
+  <div style="height: 100%;width: 100%;border: 1px solid lightgray"></div>
+</template>
+
+<script>
+export default {
+  name: 'NpmTrafficLine'
+}
+</script>

src/views/charts2/charts/npm/RelatedSessions.vue

@@ -0,0 +1,9 @@
+<template>
+ <div style="height: 100%;width: 100%;border: 1px solid lightgray"></div>
+</template>
+
+<script>
+export default {
+  name: 'RelatedSessions'
+}
+</script>